Html css : 防止 div 宽度扩展到可用宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18134700/
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
css : prevent div width from expanding to available width
提问by vlad
How can I prevent div from expanding? I want div with elements not to take 100% of available space and have width that it's children have. I need this for centering parent div horizontally. The trick is that child elements should share float:left or diplay: inline-block and fluid width, so there can be few rows of child elements.
如何防止 div 扩展？我希望带有元素的 div 不占用 100% 的可用空间，并且具有孩子们拥有的宽度。我需要这个来水平居中父 div。诀窍是子元素应该共享 float:left 或 diplay: inline-block 和流体宽度，因此可以有几行子元素。
I can not wrap each row in its own div since it will break responsive design.
我不能将每一行都包装在自己的 div 中，因为它会破坏响应式设计。
回答by Kevin Lynch
You should use display: table;It will shrink to the size of it's contents and can also be centered and positioning without having to assign a given width.
您应该使用display: table;它将缩小到其内容的大小，并且还可以居中和定位而无需分配给定的宽度。
回答by Henry Woody
You can set the width property of the children to fit-content. Doing so will make these elements take up only as much horizontal space as they need and is available within the parent.
您可以将子项的宽度属性设置为fit-content. 这样做将使这些元素只占用它们需要的水平空间，并且在父级中可用。
You can also set width to max-contentbut this will ignore the width of the parent and content will extend as far as any descendants need and possibly overflow the parent.
您也可以将宽度设置为，max-content但这将忽略父级的宽度，并且内容将扩展到任何后代需要的范围，并可能溢出父级。
Example:
示例：
Problem setup:
问题设置：
.parent {
width: 15rem;
height: 5rem;
border: 1px solid blue;
}
.child {
border: 1px solid red;
}<div class="parent">
<div class="child">
Content for child
</div>
</div>Solution:
解决方案：
.parent {
width: 15rem;
height: 5rem;
border: 1px solid blue;
}
.child {
width: fit-content;
border: 1px solid red;
}<div class="parent">
<div class="child">
Content for child
</div>
</div>Support for fit-contentis pretty good (caniuse?). As of this posting, there's at least some support for fit-contenton all the browsers except IE, Edge, and Opera.
对 的支持fit-content非常好（caniuse？）。截至本文发布时，fit-content除 IE、Edge 和 Opera 之外的所有浏览器至少都有一些支持。
回答by Ryan H.
If you truly want the parent divto collapse around its child elements (for whatever reason, based on what you're trying to accomplish) and you then want to center that div, then @Vector's answer is spot on, use display: tablewith margin: 0 auto.
如果您真的希望父div元素围绕其子元素折叠（无论出于何种原因，基于您要完成的任务），然后您想要将其居中div，那么@Vector 的答案就是正确的，请使用display: tablewith margin: 0 auto。
If it's ok for the divto remain expanded to the full width of the container in which you're trying to center your children, then you have at least a couple more options, again depending on your particular situation.
如果可以div保持扩展到您尝试将孩子居中的容器的整个宽度，那么您至少还有更多选择，这同样取决于您的特定情况。
You can use text-align: center.
您可以使用text-align: center.
.content {
text-align: center;
border-style: solid;
border-width: thin;
}
.content span {
display: inline;
border-style: solid;
border-width: thin;
}<div class="content">
<div>Test</div>
<div>Test</div>
</div>You could also use the newer display: flexwith justify-content: center, depending on the level of browser compatibility you're supporting, of course.
当然，您也可以使用较新的display: flexwith justify-content: center，这取决于您支持的浏览器兼容性级别。
.content {
display: flex;
justify-content: center;
border-style: solid;
border-width: thin;
}
.content div {
border-style: solid;
border-width: thin;
}<div class="content">
<div>Test</div>
<div>Test</div>
</div>回答by mitch
have you tried using display: inline-block? DIV will take up 100% width because they are block elements.
你试过使用display: inline-block吗？DIV 将占据 100% 的宽度，因为它们是块元素。
