时间戳

首页 > 解决方案 > CSS | 在表单内的项目之间添加空格

html - CSS | 在表单内的项目之间添加空格

问题描述

所以我有一个在 flexbox 卡内的表单。该卡有 2 个面，左侧和右侧。左边是图片，右边是实际输入。我需要不同输入之间的空间。他们现在太拥挤了。我尝试将表单设置为 flexbox 和 justify-content: space-around, space-between 都没有达到我想要的效果。

我已经尝试为表单和元素添加边距和填充，但必须有更好的方法。我附上了一张图片和jfiddle来帮助您查看我的问题。

@import url('https://fonts.googleapis.com/css2?family=Roboto&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，并尝试学习更多并成为一个更好的开发者。感谢您的时间和帮助。这是一个截图

标签： htmlcssflexbox

解决方案

如果您只需要元素之间的一些空间input，您可以将以下内容添加到您的 css

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

因为你已经拥有了自己的每个input元素div，所以这会很好。

@import url('https://fonts.googleapis.com/css2?family=Roboto&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>

这是一个小提琴。

推荐阅读