并排放置标签和输入

Question

我要完成的工作是使p标签（红色）与复选框（黄色）的左侧对齐。我四处张望，仍然找不到解决方案，我也尝试过使用其他属性，但似乎没有任何作用。

这是我到目前为止所拥有的：

label {
  display: block;
  background-color: yellow;
}

.mainBox {
  background-color: red;
}

#checkLabel {
  position: relative;
}

<div class="mainBox">
  <div id="checkLabel" class="labelClass">
    <p for="improvements">Things that should be improved in the future (Check all that apply):</p>
  </div>
  <div id="checkbox" class="rightTab">
    <label><input type="checkbox" name="improvements" value="parking"> Parking</label>
    <label><input type="checkbox" name="improvements" value="bathrooms"> Bathrooms</label>
    <label><input type="checkbox" name="improvements" value="amenities"> Amenities</label>
    <label><input type="checkbox" name="improvements" value="wifi"> Faster Wi-Fi
        <label><input type="checkbox" name="improvements" value="Accommodations"> Accommodations</label>
    <label><input type="checkbox" name="improvements" value="housekeeping"> Daily Housekeeping</label>
    <label><input type="checkbox" name="improvements" value="furniture"> Furniture and Linens</label>
    <label><input type="checkbox" name="improvements" value="checkin&out"> Rolling Check-in/out</label>
    <label><input type="checkbox" name="improvements" value="cs"> 24/7 Customer Service</label>
    <label><input type="checkbox" name="improvements" value="planning"> Hotel Planning & Bookings</label>
  </div>
</div>

Answer 1

为此建议使用引导程序。 在您的项目中安装bootstrap 4，然后点击以下链接。 这将指导您实现目标。

使用如上所示的 col 类，左栏中的红色标签和右栏中的黄色标签。就是这样。

轻松出路。他们已经用图表解释了一切。 使用引导程序可以节省大量时间。

Answer 2

如果我的理解正确，您希望<p>位于<input旁边。好吧，您可以将<p>的{​​{1}}更改为display而不是inline：

block

这将产生以下输出：

#checkLabel p {
    display: inline;
}

label {
  display: block;
  background-color: yellow;
}

.mainBox {
  background-color: red;
}

#checkLabel {
  position: relative;
  display: inline;
}

这是您想要的吗？

Answer 3

我想这就是您想要的。 display：inline-block将使它们并排，但是first div具有一个大的p元素，因此指定width会限制它获取整个宽度。 vertical-align：top会将div推到顶部。

label {
  display: block;
  background-color: yellow;
}

.mainBox {
  background-color: red;
 
}

#checkLabel {
  position: relative;
  display:inline-block;
  width:50%;
  vertical-align: top;
   
}
#checkbox{
  display:inline-block;
  vertical-align: top;
}

<div class="mainBox">
  <div id="checkLabel" class="labelClass">
    <p for="improvements">Things that should be improved in the future (Check all that apply):</p>
  </div>
  <div id="checkbox" class="rightTab">
    <label><input type="checkbox" name="improvements" value="parking"> Parking</label>
    <label><input type="checkbox" name="improvements" value="bathrooms"> Bathrooms</label>
    <label><input type="checkbox" name="improvements" value="amenities"> Amenities</label>
    <label><input type="checkbox" name="improvements" value="wifi"> Faster Wi-Fi
        <label><input type="checkbox" name="improvements" value="Accommodations"> Accommodations</label>
    <label><input type="checkbox" name="improvements" value="housekeeping"> Daily Housekeeping</label>
    <label><input type="checkbox" name="improvements" value="furniture"> Furniture and Linens</label>
    <label><input type="checkbox" name="improvements" value="checkin&out"> Rolling Check-in/out</label>
    <label><input type="checkbox" name="improvements" value="cs"> 24/7 Customer Service</label>
    <label><input type="checkbox" name="improvements" value="planning"> Hotel Planning & Bookings</label>
  </div>
</div>

Answer 4

据我了解，您想在这些复选框的左侧浮动标签。为此，您可以选择flexbox，因为flexbox将其项目包装在盒子模型中。默认情况下，它沿行方向包装项目。因此，您只需添加属性 display 和值 flex ，即可将其内容包装在一行中。我在下面的代码段中添加了这些代码，您会发现标签占用了很多空间，因此可以定义标签class（.labelClass）的宽度。

label {
  display: block;
  background-color: yellow;
}

.mainBox {
  background-color: red;
  display: flex;
}

#checkLabel {
  width: 30%;
}
#checkLabel p{
  margin:0 5px;
}
#checkbox{
  width: 70%;
}

<div class="mainBox">
  <div id="checkLabel" class="labelClass">
    <p for="improvements">Things that should be improved in the future (Check all that apply):</p>
  </div>
  <div id="checkbox" class="rightTab">
    <label><input type="checkbox" name="improvements" value="parking"> Parking</label>
    <label><input type="checkbox" name="improvements" value="bathrooms"> Bathrooms</label>
    <label><input type="checkbox" name="improvements" value="amenities"> Amenities</label>
    <label><input type="checkbox" name="improvements" value="wifi"> Faster Wi-Fi
        <label><input type="checkbox" name="improvements" value="Accommodations"> Accommodations</label>
    <label><input type="checkbox" name="improvements" value="housekeeping"> Daily Housekeeping</label>
    <label><input type="checkbox" name="improvements" value="furniture"> Furniture and Linens</label>
    <label><input type="checkbox" name="improvements" value="checkin&out"> Rolling Check-in/out</label>
    <label><input type="checkbox" name="improvements" value="cs"> 24/7 Customer Service</label>
    <label><input type="checkbox" name="improvements" value="planning"> Hotel Planning & Bookings</label>
  </div>
</div>