Question

我想要实现以下布局：

[我的按钮] [hello1] [hello2]

这是html：

<div id='container'>

  <button id='my-button'>my button</button>
  <ul id='my-ul'>

    <li>hello1</li>
    <li>hello2</li>

  </ul>
</div>

如何定义CSS？

Answer 1

Flexbox是正确的方法。在这种情况下，您要对齐容器元素中的每个元素以及列表中的元素，因此css应该是

.container {
  display: flex;
 }

  ul {
   display: flex;
  }

Answer 2

您需要使用display: inline-block;并删除ul元素上的填充。另外，我在div中添加了一个container类，以避免在CSS中使用ID。

.container > button, .container > ul, .container > ul > li {
    display: inline-block;
    margin: 0;
    padding: 0;
}

<div id='container' class="container">

  <button id='my-button'>my button</button>
  <ul id='my-ul'>

    <li>hello1</li>
    <li>hello2</li>

  </ul>
</div>

如何水平对齐按钮和ul元素

2 个答案: