css - 难以对齐 CSS 中的复选框

Question

我很难将我的复选框(在 Weeks 下)与我表单的其他部分(即 2. Date & Time)对齐。除此之外，我似乎无法在复选框右侧获取文本，它似乎总是出现在下方。我该如何解决这个问题？

这是我的 fiddle :http://jsfiddle.net/4YMaQ/2/

代码

label {
    width: 8em;
    float: left;
    text-align: left;
    display: block;
}
select {
    width: 70%;
}
.slider, .slider2 {
    width: 100%;
    margin-top: 5px;
}
input {
    border: none;
    font-family: 'Segoe UI', arial, helvetica, sans-serif !important;
    font-size: 14px;
    padding: 0px;
    background-color: transparent;
}
.clear {
    clear: both;
}
.w50 {
    width: 50%;
}
.weeks fieldset {
    border: none;
    outline: none;
}
.weeks fieldset > legend {
    float: left;
    margin-right: 3.8em;
}
.weeks fieldset .item {
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.weeks fieldset label {
    float: none;
    display: inline-block;
    vertical-align: top;
}
.left {
    float: left;
    outline: none;
}
fieldset span {
    display: inline-block;
    width: 12em;
}
.weeks fieldset span {
    display: inline-block;
    width: 2em;
}
.request_heading {
    font-size: 18px;
    font-weight: bold;
}
.page {
    padding-left: 20px;
    font-family: 'Segoe UI', arial, helvetica, sans-serif;
    padding-right: 20px;
    font-size: 14px;
}

Answer 1

你的跨度是 2em(你似乎在下面的行中覆盖了你的 12em)，因为你的标签是 8em，这就是为什么如果你改变你的标签，它们会换行到下一行

如果您将跨度更改为 3.5em 并将标签更改为 1.5em，您将获得以下内容:

 .weeks fieldset label {width:1.5em}
 .weeks fieldset span {width:3em;}

http://jsfiddle.net/4YMaQ/6/

如果您更改图例的右边距，您可以在一行中放置五个:

 .weeks fieldset > legend {margin-right:1.1em;}