我的复选框或单选按钮无法正确对齐？

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>

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

我正在做任何导致此问题的事情吗？通常，简单的br标签会对齐无线电值。但是，值不能正确对齐。

任何建议或评论都会有所帮助！

下面是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>

Answer 2

添加一个父div并应用以下CSS：

.chkcon{
    display:inline-block;
    text-align: center;
}

body{
    text-align:center;
}
.chkcon{
    background:red;
    display: inline-block;
    text-align: left;
}

<body>
<div class="chkcon">
<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> What is your favorite color? </p>
<div class="chkcon">
      <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
   ></div>
</body>

body {
  height: 920px;
  width: 1300px;
  margin: 0 0 0 0;
  font-family: 'Roboto';
}
.chkcon{
    display: inline-block;
    text-align: left;
}
#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>
 <div class="chkcon">
      <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>
 <div class="chkcon">
      <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
   ></div>


      <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>

Answer 3

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,#check-container {
    display: flex;
    text-align: left;
    flex-direction: column;
}
#money-container label {
    width: 100px;
    margin: auto;
}
#check-container label
{ 
  width: 150px;
  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>
      <div id="check-container">
      <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
   >
</div>

      <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>

Answer 4

HTML看起来像

uni_data = pd.DataFrame(input_data['Data'])

在您的CSS中

import pandas as pd

如您所见，它将帮助您在标签中垂直对齐项目