1

我在对齐表单上的元素时遇到困难，需要一些帮助。CSS 不是我的强项！

我想对齐“容量”和“周” - 以及“公园”、“演讲风格”和“房间结构”右侧的滑块。（即作为新列）

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

到目前为止，这是我的代码，我在这里包含了一个 jsfiddle ：

<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>
4

1 回答 1

1

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

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

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

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;
}
于 2013-03-10T20:19:57.107 回答