Question

我正在编写调查表，但在垂直对齐方面遇到问题。如何将单选框和复选框输入与其上方的文本垂直对齐？

请看下面的两张图片，以便更好地理解我的要求。
我的代码呈现的表单的屏幕截图：img1
这是我要实现的目标的屏幕截图：img2

这是我的代码：

body {
  text-align: center;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background: -webkit-linear-gradient(
      rgba(29, 38, 113, 0.8),
      rgba(195, 55, 100, 0.8)
    ),
    url("https://images.pexels.com/photos/3184359/pexels-photo-3184359.jpeg?cs=srgb&dl=pexels-fauxels-3184359.jpg&fm=jpg");
  background: linear-gradient(rgba(29, 38, 113, 0.8), rgba(195, 55, 100, 0.8)),
    url("https://images.pexels.com/photos/3184359/pexels-photo-3184359.jpeg?cs=srgb&dl=pexels-fauxels-3184359.jpg&fm=jpg"); /* The least supported option. */
  background-size: cover;
}

h1,
h2 {
  color: white;
  font: "Roboto Condensed", sans-serif;
  margin: 1px auto;
}
h1 {
  margin-top: 20px;
}

.master-div {
  width: 45em;
  margin: auto;
  margin-top: 25px;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 1em;
  border-radius: 0.5em;
}

#survey-form {
  padding: 3em;
}
.labels {
  font-size: 1.3em;
  color: white;
  text-align: left;
}
.fields {
  text-align: left;
  margin: 0.5em 0 1.5em 0;
}

.input-fields {
  font-size: 1em;
  height: 2.5em;
  width: 100%;
  border-radius: 0.4em;
  padding-left: 0.8em;
}

ul * {
  text-align: left;
  color: white;
  list-style-type: none;
}
#time-of-day {
  margin-left: 0;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="app.css" />
    <title>Document</title>
  </head>
  <body>
    <main>
      <h1>Weblytics Bootcamp Post-Completion Survey</h1>
      <h2>Thank you for trusting us</h2>
      <div class="master-div">
        <form action="POST" id="survey-form">
          <div class="form-rows">
            <div class="labels">
              <label for="name">Name</label>
            </div>
            <div class="fields">
              <input
                type="text"
                name="name"
                id="name"
                class="input-fields"
                placeholder="Enter your name"
                required
              />
            </div>
          </div>
          <div class="form-rows">
            <div class="labels">
              <label for="email">Email</label>
            </div>
            <div class="fields">
              <input
                type="email"
                name="email"
                id="email"
                class="input-fields"
                placeholder="Enter your email"
                required
              />
            </div>
          </div>
          <div class="form-rows">
            <div class="labels">
              <label for="number">On a scale of 1-10, how good was it?</label>
            </div>
            <div class="fields">
              <input
                type="number"
                name="number"
                id="number"
                class="input-fields"
                placeholder="Enter a number"
                min="1"
                max="10"
                required
              />
            </div>
          </div>
          <div class="form-rows">
            <div class="labels">
              <label for="dropdown">Some question?</label>
            </div>
            <div class="fields">
              <select name="dropdown" id="dropdown">
                <option value="home">Option 1</option>
                <option value="office">Option 2</option>
              </select>
            </div>
          </div>
          <div class="form-rows">
            <div class="labels">
              <label for="dropdown">Some question?</label>
            </div>
            <div class="fields">
              <ul id="time-of-day">
                <li class="radio">
                  <input
                    type="radio"
                    name="time"
                    id="morn"
                    value="morning"
                    checked
                  />
                  <label for="morn">Option 1</label>
                </li>
                <li class="radio">
                  <input
                    type="radio"
                    name="time"
                    id="after"
                    value="afternoon"
                  />
                  <label for="after">Option 2</label>
                </li>
                <li class="radio">
                  <input type="radio" name="time" id="even" value="evening" />
                  <label for="even">Option 3</label>
                </li>
              </ul>
            </div>
          </div>
          <div class="form-rows">
            <div class="labels">
              <label for="emotions"
                >Some question?<br />
                (Select all that apply)</label
              >
            </div>
            <div class="fields">
              <ul>
                <li class="radio">
                  <input
                    type="checkbox"
                    name="emotion"
                    id="exc"
                    value="excited"
                    checked
                  />
                  <label for="exc">Option 1</label>
                </li>
                <li class="radio">
                  <input
                    type="checkbox"
                    name="emotion"
                    id="hum"
                    value="humbled"
                  />
                  <label for="hum">Option 2</label>
                </li>
              </ul>
            </div>
          </div>
          <div class="form-rows">
            <div class="labels">
              <label for="text">Please describe your experience.</label>
            </div>
            <div class="fields">
              <textarea
                name="text"
                id="text"
                cols="50"
                rows="5"
                placeholder="Enter your experience"
                required
              ></textarea>
            </div>
          </div>
          <button class="button" type="sumbit">Submit</button>
        </form>
      </div>
    </main>
  </body>
</html>

Answer 1

从 ul 中删除填充。

body {
  text-align: center;
  height: 100vh;
  width: 100vw;
  background: -webkit-linear-gradient( rgba(29, 38, 113, 0.8), rgba(195, 55, 100, 0.8)), url("https://images.pexels.com/photos/3184359/pexels-photo-3184359.jpeg?cs=srgb&dl=pexels-fauxels-3184359.jpg&fm=jpg");
  background: linear-gradient(rgba(29, 38, 113, 0.8), rgba(195, 55, 100, 0.8)), url("https://images.pexels.com/photos/3184359/pexels-photo-3184359.jpeg?cs=srgb&dl=pexels-fauxels-3184359.jpg&fm=jpg");
  /* The least supported option. */
  background-size: cover;
}

h1,
h2 {
  color: white;
  font: "Roboto Condensed", sans-serif;
  margin: 1px auto;
}

h1 {
  margin-top: 20px;
}

.master-div {
  width: 45em;
  margin: auto;
  margin-top: 25px;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 1em;
  border-radius: 0.5em;
}

#survey-form {
  padding: 3em;
}

.labels {
  font-size: 1.3em;
  color: white;
  text-align: left;
}

.fields {
  text-align: left;
  margin: 0.5em 0 1.5em 0;
}

.input-fields {
  font-size: 1em;
  height: 2.5em;
  width: 100%;
  border-radius: 0.4em;
  padding-left: 0.8em;
}

ul {
  padding: 0;
}

ul * {
  text-align: left;
  color: white;
  list-style-type: none;
}

#time-of-day {
  margin-left: 0;
}

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

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="app.css" />
  <title>Document</title>
</head>

<body>
  <main>
    <h1>Weblytics Bootcamp Post-Completion Survey</h1>
    <h2>Thank you for trusting us</h2>
    <div class="master-div">
      <form action="POST" id="survey-form">
        <div class="form-rows">
          <div class="labels">
            <label for="name">Name</label>
          </div>
          <div class="fields">
            <input type="text" name="name" id="name" class="input-fields" placeholder="Enter your name" required />
          </div>
        </div>
        <div class="form-rows">
          <div class="labels">
            <label for="email">Email</label>
          </div>
          <div class="fields">
            <input type="email" name="email" id="email" class="input-fields" placeholder="Enter your email" required />
          </div>
        </div>
        <div class="form-rows">
          <div class="labels">
            <label for="number">On a scale of 1-10, how good was it?</label>
          </div>
          <div class="fields">
            <input type="number" name="number" id="number" class="input-fields" placeholder="Enter a number" min="1" max="10" required />
          </div>
        </div>
        <div class="form-rows">
          <div class="labels">
            <label for="dropdown">Some question?</label>
          </div>
          <div class="fields">
            <select name="dropdown" id="dropdown">
              <option value="home">Option 1</option>
              <option value="office">Option 2</option>
            </select>
          </div>
        </div>
        <div class="form-rows">
          <div class="labels">
            <label for="dropdown">Some question?</label>
          </div>
          <div class="fields">
            <ul id="time-of-day">
              <li class="radio">
                <input type="radio" name="time" id="morn" value="morning" checked />
                <label for="morn">Option 1</label>
              </li>
              <li class="radio">
                <input type="radio" name="time" id="after" value="afternoon" />
                <label for="after">Option 2</label>
              </li>
              <li class="radio">
                <input type="radio" name="time" id="even" value="evening" />
                <label for="even">Option 3</label>
              </li>
            </ul>
          </div>
        </div>
        <div class="form-rows">
          <div class="labels">
            <label for="emotions">Some question?<br />
                (Select all that apply)</label
              >
            </div>
            <div class="fields">
              <ul>
                <li class="radio">
                  <input
                    type="checkbox"
                    name="emotion"
                    id="exc"
                    value="excited"
                    checked
                  />
                  <label for="exc">Option 1</label>
            </li>
            <li class="radio">
              <input type="checkbox" name="emotion" id="hum" value="humbled" />
              <label for="hum">Option 2</label>
            </li>
            </ul>
          </div>
        </div>
        <div class="form-rows">
          <div class="labels">
            <label for="text">Please describe your experience.</label>
          </div>
          <div class="fields">
            <textarea name="text" id="text" cols="50" rows="5" placeholder="Enter your experience" required></textarea>
          </div>
        </div>
        <button class="button" type="sumbit">Submit</button>
      </form>
    </div>
  </main>
</body>

</html>

Answer 2

从 ul 中删除填充后它会工作

Answer 3

您将获得 ul/ol 之类的默认值

margin-block-start: 1em;

因此，对于这种情况，您必须将内边距和边距设置为“0px/0”。喜欢：

ul {
  padding: 0;
  marging: 0;
}

CSS 布局有问题。垂直对齐问题

3 个答案: