How to align button and ul elements horizontally

Question

I want to achieve following layout:

[my button][hello1][hello2]

This is html:

<div id='container'>

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

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

  </ul>
</div>

How to define css?

It's not exactly the same question as asked in 'Horizontal list items', which is ul only. Does button align with ul > li? This is why this question is asked. — user3792705, Jan 27 '20 at 08:10

score 0 · Answer 1 · answered Jan 26 '20 at 21:50

0

Flexbox is the right way to this. In this case, you want to align every element in the container element, and the elements in the list, so the css should be

.container {
  display: flex;
 }

  ul {
   display: flex;
  }

answered Jan 26 '20 at 21:50

jonask

679
2
6
21

score 0 · Accepted Answer · answered Jan 26 '20 at 21:52

You need to use display: inline-block; along with removing the padding on the ul element. Also, I have added a container class to the div to avoid using IDs in CSS.

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

How to align button and ul elements horizontally

2 Answers2