相关疑难解决方法(0)

我正在布置一组复选框,如果文本太长,我会在复选框下面运行这个古老的文本换行问题.

我的HTML:

<div class="right">
    <form id="updateProfile">
        <fieldset class="checkboxes">
            <p>4. What is your favorite type of vacation?</p>
            <label><input type="checkbox" name="vacation" value="Ski Trips"> Ski Trips</label>
            <label><input type="checkbox" name="vacation" value="Beach Visits"> Beach Visits</label>
            <label><input type="checkbox" name="vacation" value="Cruises"> Cruises</label>
            <label><input type="checkbox" name="vacation" value="Historical and educational trips"> Historical and educational trips</label>
            <label><input type="checkbox" name="vacation" value="Yachting"> Yachting</label>
            <label><input type="checkbox" name="vacation" value="Road Trip"> Road Trip</label>
            <label><input type="checkbox" name="vacation" value="Spa Weekend"> Spa Weekend</label>
            <label><input type="checkbox" name="vacation" value="Bed and Breakfast"> Bed and Breakfast</label>
            <label><input type="checkbox" name="vacation" value="Stay home and …

我有2个html单选按钮(由<br />标签分隔),其中文本包含在单选按钮下,而不是与左缩进对齐(由于它包含div的大小).文本包装不是问题,问题是它在单选按钮本身下不正确地包装,而不是与它上面的行中的文本对齐.我假设有人在级联中的某个地方设置了输入标签的样式.我没有详尽地搜索附加到此页面的所有样式,但文本是否应该像子弹列表一样自动正确包装？

如果没有,我将如何解决这个问题？我是否需要插入<br />标签,我希望线条断开,以便它们正确对齐？

谢谢!

示例标记和 CSS

.wrap {
  width: 220px;
}

.indi-wrap {
  padding-bottom: 10px;
}

.control-label {
  display: inline;
  font-weight: 300;
}

button.btn-link {
  background: 0;
  border: 0;
  padding: 0;
  margin: 0;
}

<div class="wrap">
  <div class="indi-wrap">
    <input type="checkbox" />
    <label class="control-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</label>
    <button type="button" class="btn btn-link">only</button>
  </div>
  <div class="indi-wrap">
    <input type="checkbox" />
    <label class="control-label">Xonsectetur adipiscing.</label>
    <button type="button" class="btn btn-link">only</button>
  </div>
  <div class="indi-wrap">
    <input type="checkbox" />
    <label …