Выровнять два блока в одну линию CSS

Question

Верстаю меню для игры, мне нужно создать два дива по одной линии.

Это я сделал, но содержание второго дива почему-то внизу.

Как это исправить?

<header align=c enter style="width:100%;height:10%;">
  <h3 style="font-family:OCR A Extended V3;font-size:40px;">Multisnaake</h3>
</header><br>
<div style="display: inline; height: 50%;">
  <button class="menuButton" style="font-size:30; width:20%;">
                Enter the random game
            </button>
  <p></p>
  <button class="menuButton" style="font-size:30; width:20%;">
                Create game
            </button>
  <p></p>
  <button class="menuButton" style="font-size:30; width:20%;" onclick="findGame();">
                Find game
            </button>
  <p></p>
  <button class="menuButton" style="font-size:30; width:20%;">
                View statistics
            </button>
  <p></p>
  <button class="menuButton" style="font-size:30; width:20%;">
                Exit
            </button>
</div>
<div style="display: inline;">
  <button>
                skl
            </button>
</div>

Answer 1

             
             <nav style="display: flex;">
              <div style="flex-direction: column; height: 50%;">
                  <button class = "menuButton" style = "font-size:30;">
                      Enter the random game
                  </button><p></p>
                  <button class = "menuButton" style = "font-size:30;">
                      Create game
                  </button><p></p>
                  <button class = "menuButton" style = "font-size:30;" onclick="findGame();">
                      Find game
                  </button><p></p>
                  <button class = "menuButton" style = "font-size:30;">
                      View statistics
                  </button><p></p>
                  <button class = "menuButton" style = "font-size:30;">
                      Exit
                  </button>
              </div>
              <div style="flex-direction: column;">
                  <button>
                      skl
                  </button>
              </div>
             </nav>

вот так? нужно было задать общего родителя для 2 блоков div

Answer 2

Кнопки по умолчанию являются inline-элементами, а header и div'ы блочными. Вы же наоборот сделали их inline'овыми.

Если брать голый макет, то достаточно сделать так что бы кнопки были одна под другой, это можно сделать, например, так:

button {
  display: block;
}

А для того что бы выровнять блоки друг напротив друга можно воспользоваться Flex:

.wrapper {
  display: flex;
}

Рабочий пример на основе Вашего кода:

.wrapper {
  display: flex;
}

button {
  display: block;
}

<header>
  <h3>Multisnaake</h3>
</header>

<div class="wrapper">
  <div>
    <button>Enter the random game</button>
    <button>Create game</button>
    <button>Find game</button>
    <button>View statistics</button>
    <button>Exit</button>
  </div>
  <div>
    <button>skl</button>
  </div>
</div>

БЛОГ НА HUSL

Выровнять два блока в одну линию CSS

Ответы (2 шт):