我正在努力实现以下目标:
我尝试将div显示为行内块,其余的显示为 宽度(空格)应在div周围均匀分布(如 边距:自动)。
我尝试获取div顶部而不是底部边框以与每个对齐 其他,将指定的边距顶部和底部留给下面的任何div 或基于高度而彼此之上。就像图像 附加
(https://i.stack.imgur.com/Y3Jwl.jpg)
[示例:see codepen] css:
#container {
min-height: 200px;
margin: 0;
padding: 10px;
border: 2px solid green;
}
#container div {
border: 2px solid red;
padding: 10px;
display: inline-block;
/* must be inline-block, not BLOCK */
margin: 5px auto;
/* AUTO works fine if set to display:block; and not display:inline-block; */
width: 120px;
/* the longer the item name, the width should auto expand to fit */
margin: 2px auto;
}
<section id="container">
<div>
<ul>
<li>Item one</li>
<li>Item two</li>
<li>Item three </li>
<li>Item four</li>
<li>Item five</li>
</ul>
</div>
<div>
<ul>
<li>Item one</li>
<li>Item two</li>
<li>Item three </li>
<li>Item four</li>
<li>Item five</li>
<li>Item six </li>
<li>Item seven</li>
<li>Item eight</li>
</ul>
</div>
<div>
<ul>
<li>Item one</li>
<li>Item two</li>
<li>Item three </li>
<li>Item four</li>
<li>Item five</li>
</ul>
</div>
<div>
<ul>
<li>Item one</li>
<li>Item two</li>
<li>Item three </li>
<li>Item four</li>
<li>Item five</li>
<li>Item six </li>
</ul>
</div>
<div>
<ul>
<li>Item one</li>
<li>Item two</li>
<li>Item three </li>
<li>Item four</li>
<li>Item five</li>
</ul>
</div>
</section>
答案 0 :(得分:1)
对于内联阻止项,您可以使用vertical-align: top
将同级对齐到顶部。
对于均匀间隔的宽度,您可以在#container div
内定义宽度值百分比,或告诉父#container
为display: flex
(这还将使项目与顶部对齐)。 / p>
#container{
min-height: 200px;
margin:0;
padding:10px;
border:2px solid green;
}
#container div {
border:2px solid red;
padding:10px;
display: inline-block;
margin:5px auto;
width:120px;
margin:2px auto;
vertical-align: top; /* use on inline-items */
}
<section id="container">
<div>
<ul>
<li>Item one</li>
<li>Item two</li>
<li>Item three </li>
<li>Item four</li>
<li>Item five</li>
</ul>
</div>
<div>
<ul>
<li>Item one</li>
<li>Item two</li>
<li>Item three </li>
<li>Item four</li>
<li>Item five</li>
<li>Item six </li>
<li>Item seven</li>
<li>Item eight</li>
</ul>
</div>
<div>
<ul>
<li>Item one</li>
<li>Item two</li>
<li>Item three </li>
<li>Item four</li>
<li>Item five</li>
</ul>
</div>
<div>
<ul>
<li>Item one</li>
<li>Item two</li>
<li>Item three </li>
<li>Item four</li>
<li>Item five</li>
<li>Item six </li>
</ul>
</div>
<div>
<ul>
<li>Item one</li>
<li>Item two</li>
<li>Item three </li>
<li>Item four</li>
<li>Item five</li>
</ul>
</div>
</section>
答案 1 :(得分:1)
Margin:0 auto属性用于块级元素,如果您想将任何块级元素居中于块级元素内。
1 :)您要居中的块级元素应具有定义的高度,否则边距:0自动将不起作用。
2 :)您可以使用text-align来将行内块或行内元素居中:将父容器居中,作为父级将子元素视为文本。
在您的情况下,您已将#container div定义为内联块,因此
保证金:用户定义的自动;
将不起作用,因为它不再是块级元素尽管您定义了宽度,但是它不起作用。尝试在父级中使用 text-align 属性。希望问题得到解决