通常，包含包装 display:inline-block 元素的元素会占用 100% 的可用宽度，给你这样的东西:
-----------------BODY------------------
| |
||-------------CONTAINER-------------||
||-INLINEBLOCK---INLINEBLOCK-- ||
|||____________||____________| ||
||-INLINEBLOCK-- ||
|||____________| ||
||___________________________________||
|_____________________________________|
比如说，您想要收缩包装并使容器居中:
-----------------BODY------------------
| |
| |----------CONTAINER---------| |
| |-INLINEBLOCK---INLINEBLOCK--| |
| ||____________||____________|| |
| |-INLINEBLOCK-- | |
| ||____________| | |
| |____________________________| |
|_____________________________________|
据我所知，这对于传统 CSS 和 required JavaScript hacks 是不可能的.
这个问题可以用flexbox解决吗？如果是，怎么办？
[图表无耻地从this question偷来的| .]
最佳答案
使用 body 作为 flex 容器，然后 container 成为 flex 元素。
HTML:
<body>
<div class="container">
<span class="inline-block"></span>
<span class="inline-block"></span>
<span class="inline-block"></span>
</div>
</body>
CSS:
body{
display:flex;
justify-content:space-between;
}
.container{
margin:auto; // centers horizontally
}
.inline-block{
display:inline-block;
width:200px;
height:32px;
background:#ccc;
}
随意摆弄 fiddle 。不过，这应该为您提供了基本概念。
关于css - 使用 Flexbox 收缩包装并居中包含内联 block 子元素的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35975122/