CSS 如何让 div 自动设置自己的宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5712596/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I let a div automatically set it own width?
提问by Justin808
How can I have a DIV's width behave like it does when float:leftis set, but without setting a float? width:autodoesn't seem to do it (in chrome).
我怎样才能让 DIV 的宽度表现得像float:left设置时一样，但不设置浮点数？width:auto似乎没有这样做（在 chrome 中）。
I am trying to get something like the following to work...
我正在尝试使类似以下内容的工作...
.center
{
margin-left: auto;
margin-right: auto;
width: auto;
}
回答by jessegavin
Solution with inline-block
内联块解决方案
You could try display: inline-blockand see if that works in your situation. However, you won't be able to center it using margin-left: auto& margin-right: autobecause that technique requires a width value.
您可以尝试display: inline-block看看这是否适用于您的情况。但是，您将无法使用margin-left: auto& 将其居中，margin-right: auto因为该技术需要宽度值。
If possible, use display: inline-blockand set text-align: centeron it's container.
如果可能，请在其容器上使用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>
Solution using Flexbox + container div
使用Flexbox+容器div的解决方案
The original answer above was written in 2011, before flexbox was implemented. You can achieve a similar effect
上面的原始答案写于 2011 年，在 flexbox 实现之前。你可以达到类似的效果
<div style="display: flex; justify-content: center;">
<div>
This will expand only as far as it needs to
</div>
</div>
Solution without container div
没有容器div的解决方案
There is another way to do this without a parent element.
还有另一种方法可以在没有父元素的情况下做到这一点。
- Set display to
inline-blockto make the div width fit to its content. - Use
position: relativeandleft: 50%to position its left edge to 50% of its containing element. - Use
transform: translateX(-50%)which will "shift" the element to the left by half its own width.
- 将 display 设置
inline-block为使 div 宽度适合其内容。 - 使用
position: relative和left: 50%将其左边缘定位到其包含元素的 50%。 - 使用
transform: translateX(-50%)which 会将元素向左“移动”其自身宽度的一半。
.center {
display: inline-block;
position: relative;
left: 50%;
transform: translateX(-50%);
}
回答by kayakyakr
For those of you who are still coming across this issue, nowadays you can handle this with:
对于那些仍然遇到这个问题的人，现在你可以处理这个问题：
<div>
<div style="display: table; margin: auto">
This will expand only as far as it needs to
</div>
</div>
Here is a new fiddle based on the accepted answer: http://jsfiddle.net/j33qL8pa/1/
这是一个基于接受的答案的新小提琴：http: //jsfiddle.net/j33qL8pa/1/
回答by jiggunjer
I think this works nowadays:
我认为这在今天有效：
.center
{
width: fit-content;
margin-left: auto;
margin-right: auto;
}
回答by Dawson
<div>s are block elements. They take the full width of their containers. Period. Just like <body>or <html>
<div>s 是块元素。他们占用了容器的整个宽度。时期。就像<body>或<html>
Your rule above is essentially doing this:
div { width:100%; margin:0 auto; }as 100% is its auto value.
您上面的规则基本上是这样做的：
div { width:100%; margin:0 auto; }因为 100% 是它的自动值。
inline-blockwould work, but it won't work exactly like a true inline-blockelement.
inline-block会工作，但它不会像真正的inline-block元素一样工作。
Basically...you can't do it without setting a width, positioning it.
基本上......你不能不设置宽度，定位它。
If you go the inline-block route, give this a read...you may end up fighting some unexpected battles with your CSS expectations.
如果您走内联块路线，请阅读本文...您最终可能会与您的 CSS 期望进行一些意想不到的战斗。
http://www.brunildo.org/test/InlineBlockLayout.html(link found near the bottom of the following msdn page) http://msdn.microsoft.com/en-us/library/ms530751%28v=vs.85%29.aspx
http://www.brunildo.org/test/InlineBlockLayout.html（在以下 msdn 页面底部附近找到链接） http://msdn.microsoft.com/en-us/library/ms530751%28v=vs.85 %29.aspx
