CSS | Добавление пространства между элементами внутри формы

ProgramBox

CSS | Добавление пространства между элементами внутри формы

Post author:admin
Запись опубликована:18 декабря, 2022
Post category:Вопросы по программированию

#html #css #flexbox

#HTML #css #flexbox

Вопрос:

Итак, у меня есть форма, которая находится внутри карты flexbox. Карточка имеет 2 стороны, левую и правую. Слева — это картинка, а справа — фактические входные данные. Мне нужно пространство между различными входами. В настоящее время они слишком стеснены. Я попытался сделать форму flexbox и justify-content: space-around, space-between ни то, ни другое не работало так, как я хотел.

Я пробовал добавлять поля и отступы к форме и элементам, но должен быть лучший способ. Я приложил изображение, а также jfiddle, чтобы помочь вам увидеть мою проблему.

 @import url('https://fonts.googleapis.com/css2?family=Robotoamp;display=swap');

body {
    margin: 0;
    padding: 0;
    font-family: Roboto;
    font-size: 0.9em;
    background-color: #ccf2f4;
}

img {
    width: 200px;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.card {
    width: 75vw;
    margin: 10px;
    background-color: #a4ebf3;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}

.card-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

.card-left,
.card-right {
    padding: 10%;
}

 <div class="card">
    <div class="card-left">
        <img src="https://media.bleacherreport.com/f_auto,w_800,h_533,q_auto,c_fill/br-img-slides/004/431/800/ca7761a4360ae26cb69ee014607228b7_crop_exact.jpg" alt="" />
    </div>
    <div class="card-right">
        <form action="">
            <div class="name">
                <label for="name" placeholder="Name">Name</label>
                <input type="text" id="name" required />
            </div>
            <div class="seat">
                <label for="seat">Select your seat</label>
                <select name="seat" id="seat">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                </select>
            </div>
            <div class="handicapped">
                <label for="handicap">Handicapped?</label>
                <input type="checkbox" value="Handicapped" />
            </div>
            <div class="wrestler">
                <label for="wrestler">Select for favorite superstar</label>
                <select name="wrestler" id="wrestler">
                    <option value="asaka">Asaka</option>
                    <option value="mcintyre">Drew Mcintyre</option>
                    <option value="zayne">Sami Zayne</option>
                    <option value="reigns">Roman Reigns</option>
                    <option value="flair">Charlotte Flair</option>
                </select>
            </div>
            <div class="submit">
                <button>Sign Up!</button>
            </div>
        </form>
    </div>
</div>

Развернуть фрагмент

Я не самый лучший специалист по CSS, так как в основном использую JavaScript, но я создал несколько проектов, которые помогут мне больше использовать CSS, стараться учиться больше и становиться лучшим разработчиком во всем. Спасибо за ваше время и помощь. вот скриншот

1. Вы можете поместить свою скрипку здесь, в своем вопросе, в виде фрагмента стека вместо отдельного jsfiddle.

2. @StephenP спасибо, чувак, я почти не использую StackOverflow, поэтому я ценю это

3. Почему бы просто не добавить некоторую высоту строки на вашу 2-ю карточку и добавить небольшое поле для входных элементов, чтобы немного расширить пространство?

Ответ №1:

Если все, что вам нужно, это просто немного пространства между input элементами, вы можете добавить следующее в свой css

 .card-right div{
  margin-bottom: 10px;
}

поскольку у вас уже есть каждый input отдельный элемент div , это будет хорошо работать.

 @import url('https://fonts.googleapis.com/css2?family=Robotoamp;display=swap');
body {
  margin: 0;
  padding: 0;
  font-family: Roboto;
  font-size: .9em;
  background-color: #ccf2f4;
}

img {
  width: 200px;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.card {
  width: 75vw;
  margin: 10px;
  background-color: #a4ebf3;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}

.card-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.card-right div {
  margin-bottom: 10px;
}

.card-left,
.card-right {
  padding: 10%;
}

 <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Simple Form Demo</title>
</head>

<body>
  <div class="container">
    <h1>Wrestlemania 36 Sign Up!</h1>
    <h2>Use the form below to reserve your spot for the year's biggest event</h2>
    <div class="card">
      <div class="card-left">
        <img src="https://media.bleacherreport.com/f_auto,w_800,h_533,q_auto,c_fill/br-img-slides/004/431/800/ca7761a4360ae26cb69ee014607228b7_crop_exact.jpg" alt="">
      </div>
      <div class="card-right">
        <form action="">
          <div class="name">
            <label for="name" placeholder='Name'>Name</label>
            <input type="text" id='name' required>
          </div>
          <div class="seat">
            <label for="seat">Select your seat</label>
            <select name="seat" id="seat">
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
            </select>

          </div>
          <div class="handicapped">
            <label for="handicap">Handicapped?</label>
            <input type="checkbox" value='Handicapped'>
          </div>
          <div class="wrestler">
            <label for="wrestler">Select for favorite superstar</label>
            <select name="wrestler" id="wrestler">
              <option value="asaka">Asaka</option>
              <option value="mcintyre">Drew Mcintyre</option>
              <option value="zayne">Sami Zayne</option>
              <option value="reigns">Roman Reigns</option>
              <option value="flair">Charlotte Flair</option>
            </select>
          </div>
          <div class="submit">
            <button>Sign Up!</button>
          </div>
        </form>
      </div>
    </div>

  </div>

</body>

</html>

Развернуть фрагмент

Вот скрипка.

Ответ №2:

 .card-right div {
    padding: 0 0 15px;
}

1. Пожалуйста, не публикуйте только код в качестве ответа, но также предоставьте объяснение, что делает ваш код и как он решает проблему вопроса. Ответы с объяснением обычно более полезны и более высокого качества и с большей вероятностью привлекут голоса.