Question

我试图将我的复选框和标签对齐（分成两列），但它无效。知道我能做些什么来解决它？

Jsfiddle：http://jsfiddle.net/wfju61oq/1/

.option label {
    display: block;
    padding-left: 15px;
    text-indent: -15px;
}
.option input {
    width: 13px;
    height: 13px;
    padding: 0;
    margin:0;
    vertical-align: bottom;
    position: relative;
    top: -1px;
    *overflow: hidden;
}

Answer 1

试试这个：

.option label {
    display: block;
    width: 220px;
}
.option input {
  float:right;
}

工作fiddle here。

Answer 2

    label {
        display: block;
        width: 300px;
        text-align: right;
        margin-right: 10px;
    }

这是一个有效的JSFiddle： http://jsfiddle.net/wfju61oq/8/

警告：您的某个ID中有&个字符：这是不正确的。

Answer 3

演示 - http://jsfiddle.net/victor_007/wfju61oq/10/

删除margin:0和label

的position:relative; top:-1px;

添加border以更好地查看vertical alignment

.option label {
  display: block;
  padding-left: 15px;
  text-indent: -15px;
  width: 150px;
  border: 1px solid red;
}
.option input {
  width: 13px;
  height: 13px;
  vertical-align: bottom;
  *overflow: hidden;
  float: right;
}

<div class="option">
  <fieldset>
    <legend>Which Service Do You Require?</legend>
    <label for="Hostess">Hostess
      <input type="checkbox" id="Hostess" value="Hostess" />
    </label>
    <label for="usher">Usher
      <input type="checkbox" id="usher" value="usher" />
    </label>
    <label for="welcomeguests">Welcome Guests
      <input type="checkbox" id="welcomeguests" value="welcomeguests" />
    </label>
    <label for="guestlists">Guest Lists
      <input type="checkbox" id="guestlists" value="guestlists" />
    </label>
    <label for="seatguests">Seat Guests
      <input type="checkbox" id="seatguests" value="seatguests" />
    </label>
    <label for="servebuffmeal">Serve Buffet Meal
      <input type="checkbox" id="servebuffmeal" value="servebuffmeal" />
    </label>
    <label for="servesitmeal">Serve Sit-Down Meal
      <input type="checkbox" id="servesitmeal" value="servesitmeal" />
    </label>
    <label for="clearplates">Clear Plates
      <input type="checkbox" id="clearplates" value="clearplates" />
    </label>
    <label for="cleartables">Clear Tables
      <input type="checkbox" id="cleartables" value="cleartables" />
    </label>
    <label for="returnhplates">Return Hired Plates
      <input type="checkbox" id="returnhplates" value="returnhplates" />
    </label>
    <label for="refilljuggs">Refill Jugs
      <input type="checkbox" id="refilljugs" value="refilljuggs" />
    </label>
    <label for="">Serve V.I.P Guests
      <input type="checkbox" id="servevipguests" value="servevipguests" />
    </label>
    <label for="">Cross-Check Invite List
      <input type="checkbox" id="crosscheckivlist" value="crosscheckivlist" />
    </label>
    <label for="">Meet & Greet Guests
      <input type="checkbox" id="Meet&GreetGuests" value="Meet&GreetGuests" />
    </label>
    <div style="clear: both"></div>
    <label>Other
      <input id="other" name="other" type="text" placeholder="Other" />
    </label>
  </fieldset>
</div>

尽管应用了CSS代码，但复选框仍未对齐

3 个答案: