расположение кнопок

Question

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

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

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

Answer 1

Совершенно непонятно, откуда взялись еще 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>

БЛОГ НА HUSL

расположение кнопок

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