разрыв строки между кнопками в CSS / HTML

Question

У меня есть скриншот, как показано ниже, который я должен скопировать в CSS / HTML.

Я создал скрипку для скриншота выше. В этот момент кнопки выровнены по прямой линии.

HTML / CSS-коды, которые я использовал для создания кнопок:

HTML:

<div class="buttons">
   <button class="add-winner">Add Winder</button>
   <button class="save">Save</button>
   <a href="https://www.w3schools.com">Cancel</a>
</div>

CSS:

.login-page .form .login-form .add-winner {
    border: 1px solid #1173B7;
    background-color: white;
    color: #1173B7;
    font-size: 14px;
    width: 25%;
    font-weight: bold;
    font-family: "Open Sans";
    outline: 0;
    border-radius: 20px;
    padding: 10px;
    cursor: pointer;
    margin-bottom: 6%;
}
.login-page .form .login-form .save {
    background-color: #C4C4C4;
    border: 1px;
    color: white;
    font-size: 14px;
    width: 35%;
    font-weight: bold;
    font-family: "Open Sans";
    border-radius: 20px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    cursor: pointer;
    margin-bottom: 6%;
}

Постановка задачи:

Мне интересно, какие изменения я должен внести в коды HTML / CSS выше или в скрипте, чтобы между кнопкой, как это показано на скриншоте, был разрыв строки.

Answer 1

Вы можете вместо этого для лучшей структуры HTML использовать list

как

ul {
list-style: none;

}
li {
margin: auto;
text-align: center;
margin: 1rem;
}

<ul class="buttons">
   <li><button class="add-winner">Add Winder</button></li>
   <li><button class="save">Save</button></li>
   <li><a href="https://www.w3schools.com">Cancel</a></li>
</ul>

Answer 2

используйте два деления. одна для кнопки добавления победителя и другая для кнопки отмены и сохранения. затем вы можете легко выровнять каждую кнопку, а также использовать тег ( br ) для получения новой строки

Answer 3

Есть несколько способов сделать это. Грязным способом было бы добавить <br>, чтобы добавить разрыв строки следующим образом (для лучшей практики читайте дальше):

<div class="buttons">
   <button class="add-winner">Add Winder</button>
   <br>
   <button class="save">Save</button>
   <br>
   <a href="https://www.w3schools.com">Cancel</a>
</div>

Вы также можете обернуть свои кнопки в любые элементы уровня блока, например:

<div class="buttons">
   <div>
      <button class="add-winner">Add Winder</button>
   </div>
   <div>
      <button class="save">Save</button>
   </div>
   <div>
      <a href="https://www.w3schools.com">Cancel</a>
   </div>
</div>

Это тоже сделало бы работу. Однако самым простым и эффективным способом, IMO, было бы установить кнопку display: block; в CSS. Вот фрагмент кода (с включенными вашими стилями) с использованием display: block;, который будет предпочтительным методом:

.form {
  background: #FFFFFF;
  width: 500px;
  height: 500px;
  margin: 0 auto 100px;
  box-sizing: content-box;
  padding: 50px;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}

.form input {
  font-family: "Roboto", sans-serif;
  outline: 0;
  background: #FFFFFF;
  width: 100%;
  border: 1px solid #979797;
  border-radius: 5px;
  margin: 0 0 15px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 14px;
}

.form input:focus {
  background-color: #C4C4C4;
}

.login-page .form .login-form a {
  color: #676767;
  text-decoration: none;
}

.login-page .form .login-form .add-winner {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  left: 40%;
  display: block;
  border: 3px solid #1173B7;
  background-color: white;
  color: #1173B7;
  font-size: 14px;
  width: 25%;
  font-weight: bold;
  font-family: "Open Sans";
  outline: 0;
  border-radius: 20px;
  padding: 10px;
  cursor: pointer;
  margin-bottom: 6%;
}

.login-page .form .login-form .save {
  display: block;
  margin-left: auto;
  margin-right: auto;
  background-color: #C4C4C4;
  border: 1px;
  color: white;
  font-size: 14px;
  width: 35%;
  font-weight: bold;
  font-family: "Open Sans";
  border-radius: 20px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  cursor: pointer;
  margin-bottom: 6%;
}

<div class="login-page">
  <div class="form">
    <form class="login-form">
      <div class="buttons container-fluid">
        <button class="add-winner">Add Winder</button>
        <button class="save">Save</button>
        <a href="https://www.w3schools.com">Cancel</a>
      </div>
    </form>
  </div>
</div>

<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<script src="https://use.fontawesome.com/991ea8a605.js"></script>

Что касается стилей для вашей конкретной ситуации. Вы также можете добавить этот стиль, чтобы добавить Победителя button, чтобы выровнять его по правой стороне, как на скриншоте

.add-winner{
  position:relative;
  left:40%;
}

А что касается нижнего белого, вы можете переопределить его, добавив этот стиль в свой CSS:

html{
  background-color: #BFBFBF;
}

Причина, по которой у вас было пустое пространство внизу, заключается в том, что вы установили background-color для вашего .login-page класса, который остановился ниже нижней части страницы.