1

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

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

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

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

1
  • Ничего не понятно.
    – Qwertiy
    10 сен 2020 в 21:11

2 ответа 2

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
7
  • Можно сделать так, чтобы кнопки были в два столбика и кнопка с skl была напротив первой? 9 сен 2020 в 20:45
  • 1
    @ПашаМороз Можно сделать так, чтобы кнопки были в два столбика и кнопка с skl была напротив первой? в ответе выше именно так
    – Vasily
    9 сен 2020 в 20:47
  • @ПашаМороз, вот так?
    – Andrey S
    9 сен 2020 в 20:49
  • 1
    @AndreyS Ваш ответ чем то отличается от моего?
    – Vasily
    9 сен 2020 в 20:57
  • 1
    @ПашаМороз как это нет, нужно просто было проскролить, вот я сейчас убрал верхнюю меню
    – Andrey S
    10 сен 2020 в 8:10
1

Кнопки по умолчанию являются 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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.