如何让div自动设置自己的宽度？

Question

如何让 DIV 的宽度表现得像设置了 float:left 时一样，但不设置浮动？ width:auto 似乎没有做到这一点（在 Chrome 中）。

我正在尝试让类似以下的东西起作用......

.center
{
    margin-left: auto;
    margin-right: auto;
    width: auto;
}

Answer 1

是块元素。他们采用容器的整个宽度。时期。就像 或

您上面的规则本质上是这样做的：
div { 宽度:100%;保证金：0 自动； } 因为 100% 是它的自动值。

inline-block 可以工作，但它不会像真正的 inline-block 元素一样工作。

基本上...如果不设置宽度、定位它就无法做到这一点。

如果您选择内联块路线，请阅读本文...您最终可能会与您的 CSS 期望进行一些意想不到的战斗。

http://www.brunildo.org/test/InlineBlockLayout.html（链接位于附近以下 msdn 页面底部）
http://msdn.microsoft.com/en -us/library/ms530751%28v=vs.85%29.aspx

Answer 2

对于那些仍然遇到此问题的人，现在您可以使用以下方法处理此问题：

<div>
  <div style="display: table; margin: auto">
    This will expand only as far as it needs to
  </div>
</div>

这是一个基于已接受答案的新小提琴： http://jsfiddle.net/j33qL8pa/1/

Answer 3

使用 inline-block 的解决方案

您可以尝试 display: inline-block 并查看它是否适合您的情况。但是，您将无法使用 margin-left: auto & 将其居中。 margin-right: auto 因为该技术需要宽度值。

如果可能，请使用 display: inline-block 并在其容器上设置 text-align: center 。

<div style="text-align: center">
  <div style="display: inline-block;">
     This will expand only as far as it needs to
  </div>
</div>

使用 Flexbox + 容器 div 的解决方案

上面的原始答案是在 2011 年编写的，当时 Flexbox 尚未实现。您可以实现类似的效果

<div style="display: flex; justify-content: center;">
  <div>
     This will expand only as far as it needs to
  </div>
</div>

没有容器 div 的解决方案

还有另一种方法可以在没有父元素的情况下实现此目的。

1. 将 display 设置为 inline-block 以使 div 宽度适合其内容。
2. 使用 position:relative 和 left: 50% 将其左边缘定位到其包含元素的 50%。
3. 使用 transform:translateX(-50%) 会将元素向左“移动”其自身宽度的一半。

.center {
  display: inline-block;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

Answer 4

我认为这在当今有效：

.center
{
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}