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

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？

标签： css

Answer 1

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

.container {
  display: flex;
 }

  ul {
   display: flex;
  }