html - 我的复选框或单选按钮没有正确对齐？

Question

我一直在制作一个简单的调查页面，以了解有关 CSS 和 HTML 的更多信息。我一直遇到这个问题，我的单选按钮值和我的复选框值没有正确对齐，特别是“你是如何支付你的旅行费用的？”部分和“你最喜欢的颜色是什么”？部分。

它们应该像这样对齐:

您是如何支付旅行费用的？

• 现金
• 检查
• 其他

body {
  height: 920px;
  width: 1300px;
  margin: 0 0 0 0;
  font-family: 'Roboto';
}

#subtag {
  width: 80%;
  text-align: center;
  margin-left: 75px;
}

.container {
  background-image: url("https://images.unsplash.com/photo-1491800943052-1059ce1e1012?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1267&q=80");
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  height: 920px;
  overflow: auto;
}

.container::before {
  content: " ";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 920px;
  background: rgba(0, 0, 0, 0.6);
}

.box {
  margin-left: auto;
  margin-right: auto;
  margin-top: 25px;
  width: 700px;
  height: 890px;
  border: 3px solid black;
  text-align: center;
  background-color: #f2f2f2;
  opacity: 0.6;
}

.textbox {
  width: 80%;
  background-color: #80bfff;
  padding: 8px 8px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.money {
  display: inline;
}

#submit {
  font-size: 14px;
  color: #d6d4e0;
  width: 270px;
  height: 40px;
  background-color: #6b5b95;
  opacity: 1.0;
}

#submit:hover {
  cursor: pointer;
}

<div class="container">
  <div class="box">

    <h3> Villa's Traveling Survey </h3>
    <p id="subtag">
      If there is anything that we can do better please let us know by filling out the survey below </p>

    <form>
      <label for="fname"> Name: </label>
      <br>
      <input type="text" name="fname" placeholder="enter name" class="textbox">
      <br>
      <label for="email"> Email: </label>
      <br>
      <input type="text" name="email" placeholder="enter email" class="textbox">
      <br>
      <label for="age"> Age: </label>
      <br>
      <input type="text" name="age" placeholder="enter age" class="textbox">
      <p> Travel Destination: </p>
      <select name="country">
        <option disabled selected value="Select Your Travel Destination"> Select Your Travel Destination </option>
        <option value="Australia"> Australia</option>
        <option value="New Zealeand"> New Zealand </option>
        <option value="Thailand"> Thailand </option>
      </select>

      <p> How did you pay for your trip? </p>

      <label>
        <input type="radio" name= "trip" value = "check" class= "money">
        check<br>
    </label>

      <label>
        <input type="radio" name= "trip" value = "cash" class= "money">
        cash<br>
      </label>

      <label>
        <input type="radio" name= "trip" value = "other" class= "money">
        other
      </label>

      <p> How did you get to your travel destination? </p>
      <br>
      <input type="checkbox" placeholder="plane" value="plane" class="checkbox">Plane
      <input type="checkbox" placeholder="boat" value="boat" class="checkbox">Boat
      <input type="checkbox" placeholder="train" value="train" class="checkbox">Train
      <input type="checkbox" placeholder="other" value="other" class="checkbox">Other

      <p> What is your favorite color? </p>
      <label><input
         name="prefer"
         value="front-end-projects"
         type="checkbox"
         class="input-checkbox"
       />Front-end Projects</label
     >
     <br/>
     <label
      ><input
        name="prefer"
        value="front-end-projects"
        type="checkbox"
        class="input-checkbox"
      />back-end Projects</label
    >
    <br/>
    <label
     ><input
       name="prefer"
       value="front-end-projects"
       type="checkbox"
       class="input-checkbox"
     />love Projects</label
   >


      <p> Please enter any additional comments or suggestions </p>
      <textarea rows="5" cols="50" maxlength="100" placeholder="Enter comments here"></textarea>
      <br>
      <input type="submit" value="submit" id = "submit">
      </form>

    </div>
</div>

我尝试过的一些解决方案是使国家/地区类垂直居中。但是，这不起作用。我也尝试过将显示更改为内联 block 。但是，它将所有值推到一行。

有什么我正在做的事情导致了这个问题吗？通常，一个简单的 br 标签将对齐 radio 值。但是，这些值没有正确对齐。

任何建议或意见都会有所帮助!

下面是jsfiddle: https://jsfiddle.net/fun_code11/9wvj130b/

Answer 1

这是因为您的 .box 类将 text-align 设置为居中。因此，您的标签和复选框都遵守该规则。它只是“看起来”很奇怪，因为您的标签内容的长度是可变的，所以较短的单词变得更靠近中心。

有很多方法来设计它，我不知道你整体上需要什么，但一个解决方案是将它们包装在一个容器中，该容器将以 .box 为中心并重置对齐，请记住单词之前的任何空格也包括在内:

#money-container {
  text-align: left;
  width: 100px;
  margin: auto;
}

<div id="money-container">
  <label>
    <input type="radio" name= "trip" value = "check" class= "money">check<br>
  </label>

  <label>
    <input type="radio" name= "trip" value = "cash" class= "money">cash<br>
  </label>

  <label>
   <input type="radio" name= "trip" value = "other" class= "money">other
  </label>
</div>

body {
  height: 920px;
  width: 1300px;
  margin: 0 0 0 0;
  font-family: 'Roboto';
}

#subtag {
  width: 80%;
  text-align: center;
  margin-left: 75px;
}

.container {
  background-image: url("https://images.unsplash.com/photo-1491800943052-1059ce1e1012?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1267&q=80");
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  height: 920px;
  overflow: auto;
}

.container::before {
  content: " ";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 920px;
  background: rgba(0, 0, 0, 0.6);
}

.box {
  margin-left: auto;
  margin-right: auto;
  margin-top: 25px;
  width: 700px;
  height: 890px;
  border: 3px solid black;
  text-align: center;
  background-color: #f2f2f2;
  opacity: 0.6;
}

.textbox {
  width: 80%;
  background-color: #80bfff;
  padding: 8px 8px;
  margin-top: 10px;
  margin-bottom: 10px;
}

#submit {
  font-size: 14px;
  color: #d6d4e0;
  width: 270px;
  height: 40px;
  background-color: #6b5b95;
  opacity: 1.0;
}

#submit:hover {
  cursor: pointer;
}

#money-container {
  text-align: left;
  width: 100px;
  margin: auto;
}

<div class="container">
  <div class="box">

    <h3> Villa's Traveling Survey </h3>
    <p id="subtag">
      If there is anything that we can do better please let us know by filling out the survey below </p>

    <form>
      <label for="fname"> Name: </label>
      <br>
      <input type="text" name="fname" placeholder="enter name" class="textbox">
      <br>
      <label for="email"> Email: </label>
      <br>
      <input type="text" name="email" placeholder="enter email" class="textbox">
      <br>
      <label for="age"> Age: </label>
      <br>
      <input type="text" name="age" placeholder="enter age" class="textbox">
      <p> Travel Destination: </p>
      <select name="country">
        <option disabled selected value="Select Your Travel Destination"> Select Your Travel Destination </option>
        <option value="Australia"> Australia</option>
        <option value="New Zealeand"> New Zealand </option>
        <option value="Thailand"> Thailand </option>
      </select>


      <p> How did you pay for your trip? </p>

      <div id="money-container">
        <label>
        <input type="radio" name= "trip" value = "check" class= "money">check<br></label>

        <label>
        <input type="radio" name= "trip" value = "cash" class= "money">cash<br></label>

        <label>
        <input type="radio" name= "trip" value = "other" class= "money">other</label>
      </div>

      <p> How did you get to your travel destination? </p>
      <br>
      <input type="checkbox" placeholder="plane" value="plane" class="checkbox">Plane
      <input type="checkbox" placeholder="boat" value="boat" class="checkbox">Boat
      <input type="checkbox" placeholder="train" value="train" class="checkbox">Train
      <input type="checkbox" placeholder="other" value="other" class="checkbox">Other

      <p> What is your favorite color? </p>
      <label><input
         name="prefer"
         value="front-end-projects"
         type="checkbox"
         class="input-checkbox"
       />Front-end Projects</label
     >
     <br/>
     <label
      ><input
        name="prefer"
        value="front-end-projects"
        type="checkbox"
        class="input-checkbox"
      />back-end Projects</label
    >
    <br/>
    <label
     ><input
       name="prefer"
       value="front-end-projects"
       type="checkbox"
       class="input-checkbox"
     />love Projects</label
   >


      <p> Please enter any additional comments or suggestions </p>
      <textarea rows="5" cols="50" maxlength="100" placeholder="Enter comments here"></textarea>
      <br>
      <input type="submit" value="submit" id = "submit">
      </form>

    </div>
</div>