0

введите сюда описание изображенияПодскажите, пожалуйста, как расположить в ряд три кнопки, как на скрине?

.buttons {
  text-align: center;
  /* центрируем элементы с display:inline-block; */
}

.button1 {
  background: #8953FC;
  color: #fff;
  display: inline-block;
  vertical-align: top;
  width: 199px;
  height: 60px;
  text-decoration: none;
  text-align: center;
  margin: 0 29px 100px 60px;
}

.button2 {
  background: #8953FC;
  color: #fff;
  display: inline-block;
  vertical-align: top;
  text-decoration: none;
  text-align: center;
  width: 199px;
  height: 60px;
  left: 515px;
  top: 554px;
}

.button3 {
  background: #8953FC;
  color: #fff;
  display: inline-block;
  vertical-align: top;
  text-decoration: none;
  text-align: center;
  width: 199px;
  height: 60px;
  left: 816px;
  top: 554px;
}
<div class="buttons">
  <a class="button1" href="#">Train</a>
  <a class="button2" href="#">Dev</a>
  <a class="button3" href="#">Test</a>
</div>

Почему-то кнопки сейчас размещены в заголовке. Как это можно исправить? введите сюда описание изображения Заранее спасибо!

4
  • Скрина не видно 15 июл 2022 в 14:26
  • @LaukhinAndrey скрин добавлен 15 июл 2022 в 14:28
  • Учебные задания допустимы в качестве вопросов только при условии, что вы пытались решить их самостоятельно перед тем, как задать вопрос. Пожалуйста, отредактируйте вопрос и укажите, что именно вызвало у вас трудности при решении задачи. Например, приведите код, который вы написали, пытаясь решить задачу
    – Pashok
    15 июл 2022 в 14:33
  • Используйте flex и justify-content 15 июл 2022 в 14:37

1 ответ 1

0

Совершенно непонятно, откуда взялись еще 3 белых надписи (последний скриншот). Достаточно использовать justify-content, flex, align-items, gap и немножко магии, чтобы всё заработало. Ниже представил только концепт, а здесь, на Github лежит прототип. Также код ниже Вы можете запустить здесь, на Codepen.

// nothing in js
* {
  /*   not necessary */
  margin: 0;
  padding: 0;
}

.container {
  position: relative;
  display: flex;
  width: 100%;
  
  height: 100px; /* any value*/
  justify-content: center;
  align-items: center;
  gap: 4em; /* any value*/
  
/*   to understanding : */
  border: 1px solid red;
  
  /*   try it */
/*   height: 100vh; /* any value*/ 
}
<div class="container">
  <a href="#">One</a>
  <a href="#">Two</a>
  <a href="#">Three</a>
</div>

Ваш ответ

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

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