Question

我正在努力实现以下目标：

我尝试将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>

Answer 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>

Answer 2

Margin：0 auto属性用于块级元素，如果您想将任何块级元素居中于块级元素内。

1 :)您要居中的块级元素应具有定义的高度，否则边距：0自动将不起作用。

2 :)您可以使用text-align来将行内块或行内元素居中：将父容器居中，作为父级将子元素视为文本。

在您的情况下，您已将#container div定义为内联块，因此

保证金：用户定义的自动；

将不起作用，因为它不再是块级元素尽管您定义了宽度，但是它不起作用。尝试在父级中使用 text-align 属性。希望问题得到解决

水平对齐内联块元素

2 个答案: