Question

我难以在表单上对齐元素并需要一些帮助。 CSS不是我的强项！

我想调整“容量”和“周” - 以及“公园”，“讲座风格”和“房间结构”右侧的滑块。（即作为新专栏）

其次，我希望在4行中正确对齐复选框。

到目前为止，这是我的代码，我已经包含了一个jsfiddle here：

<div id="search-1">
    <label>Park</label>
    <select name="">
        <option></option>
    </select>
    <br />
    <label>Lecture Style</label>
    <select name="">
        <option></option>
    </select>
    <br />
    <label>Room Structure</label>
    <select name="">
        <option></option>
    </select>
    <br />
    <label>Capacity</label>
    <input type="text" class="slider_text" disabled="disabled"
    />
    <br />
    <div class="slider"></div>
    <label>Week</label>
    <input type="text" class="slider_text2" disabled="disabled"
    />
    <br />
    <div class="slider2"></div>
    <label>Facilities</label>
    <input type="checkbox" name="fac">Chalk board
    <input type="checkbox" name="fac">Computer
    <input type="checkbox" name="fac">Data projector
    <input type="checkbox" name="fac">Dual data projector
    <input type="checkbox" name="fac">Induction loop
    <input type="checkbox" name="fac">Microphone
    <input type="checkbox" name="fac">OHP
    <input type="checkbox" name="fac">Review
    <input type="checkbox" name="fac">Visualiser
    <input type="checkbox" name="fac">Wheelchair access</div>

Answer 1

这是第一次尝试：http://jsfiddle.net/h4Xxs/

2列（浮动div，每个宽度为50％）
每个标签都放在label元素中，而不是
每个标签都通过for / id属性与其表单元素相关联（您可以点击标签，选择其表单元素。并且它更易于访问）
带有图例的字段集中的一组单选按钮。如果没有边框和图例上的图例，您将无法识别其上方带有图例的众所周知的灰色边框。字段集clear: both通过类.clear，因为之前的div是浮动的。
所有单选按钮及其新标签都位于不会浮动图例下方的div中，因为此div正在通过overflow: hidden创建格式化上下文（否则第二行单选按钮将从图例，因为您习惯于在右侧看到文本，然后在大多数文本的img { float: left }下面看
4列单选按钮，但它并不完美，因为一个标签需要2行，每个标签上的现有宽度为8em。不确定它应该是什么样子，所以我只将早先添加的span对齐到顶部（否则它真的很难看）。您可以根据自己的需要随意修改布局。

就是这样。呃，删除我添加的所有轮廓，它们只是为了更好地理解！

HTML：

<div id="search-1">
    <div class="left w50">
        <p>
            <label for="a1">Park</label>
            <select name="" id="a1">
                <option></option>
            </select>
        </p>
        <p>
            <label for="a2">Lecture Style</label>
            <select name="" id="a2">
                <option></option>
            </select>
        </p>
        <p>
            <label for="a3">Room Structure</label>
            <select name="" id="a3">
                <option></option>
            </select>
        </p>
    </div>
    <div class="left w50">
        <p>
            <label for="b1">Capacity</label>
            <input type="text" class="slider_text" disabled="disabled" id="b1">
        </p>
        <div class="slider"></div>
        <label for="b2">Week</label>
        <input type="text" class="slider_text2" disabled="disabled" id="b2"
        />
        <div class="slider2"></div>
    </div>

    <fieldset class="clear">
        <legend>Facilities</legend>
        <div class="item">
        <span>
            <input type="checkbox" name="fac" id="ch1"><label for="ch1">Chalk board</label>
        </span>
        <span>
            <input type="checkbox" name="fac" id="ch2"><label for="ch2">Computer</label>
        </span>
        <span>
            <input type="checkbox" name="fac" id="ch3"><label for="ch3">Data projector</label>
        </span>
        <span>
            <input type="checkbox" name="fac" id="ch4"><label for="ch4">Dual data projector</label>
        </span>
        <span>
            <input type="checkbox" name="fac" id="ch5"><label for="ch5">Induction loop</label>
        </span>
        <span>
            <input type="checkbox" name="fac" id="ch6"><label for="ch6">Microphone</label>
        </span>
        <span>
            <input type="checkbox" name="fac" id="ch7"><label for="ch7">OHP</label>
        </span>
        <span>
            <input type="checkbox" name="fac" id="ch8"><label for="ch8">Review</label>
        </span>
        <span>
            <input type="checkbox" name="fac" id="ch9"><label for="ch9">Visualiser</label>
        </span>
        <span>
            <input type="checkbox" name="fac" id="ch10"><label for="ch10">Wheelchair access</label>
        </span>
            </div>
    </fieldset>
</div>

CSS：

body {
    font-family: 'segoe ui', arial, helvetica, sans-serif;
    padding-right: 20px;
    font-size: 14px;
}
.left {
    float: left;
    outline: 1px dotted green;
}
.clear {
    clear: both;
}
.w50 {
    width: 50%;
}

label {
    width: 8em;
    float: left;
    text-align: left;
    display: block;
}
select {
    width: 12em;
}
.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;
}

fieldset {
    border: none;
    outline: 1px dashed blue;
}
fieldset > legend {
    float: left;
    padding: 0 1em 0 0;
    margin: 0;
}
fieldset .item {
    overflow: hidden;
    margin: 0;
    padding: 0;
}
fieldset span {
    display: inline-block;
    width: 24%;
    outline: 1px dashed red;
}
fieldset label {
    float: none;
    display: inline-block;
    vertical-align: top;
}

形式对齐问题

1 个答案: