0

我正在研究基于 css 和 div 的表单，到目前为止它看起来不错。但是，我无法让表单的标签侧随内容一起扩展。

右侧扩展得很好，但我还需要左侧扩展它，所以它看起来不错。在下面的 jsFiddle 中，您可以看到标签“流派”在高度上与右侧区域不匹配。

这是一个jsFiddle：

http://jsfiddle.net/MSPAN/6/

HTML：

<div id="parent">
    <div id="titleArea">
        <label for="name" class="label">Name</label>
        <div class="input">
            <input id="name" type="text" />
        </div>
    </div>
    <div id="metaDataArea">
        <label for="genre" class="label">Genre</label>
        <div class="input">
            <select id="genre">
                <option value="fiction">Fiction</option>
                <option value="nonfiction">Non-fiction</option>
            </select>
        </div>
        <div class="input">
            <input type="checkbox" name="mediaType">Hardback
            <input type="checkbox" name="mediaType">Paperback
            <input type="checkbox" name="mediaType">eBook
        </div>
    </div>
</div>

CSS：

#parent {
    width: 550px;
    border: 1px dotted #777;
    overflow: hidden;
}

.label {
    background-color: #ccc;
    border: 1px solid #333;
    float: left;
    margin: 4px;
    padding: 2px;
    width: 20%;
    text-align: left;
}

.input {
    background-color: #e1e1e1;
    float: left;
    margin: 4px;
    padding: 2px;
    width: 70%;
}

谢谢！

4

1 回答 1

0

我继续努力并找到了解决方案。我为每个表单组创建了一个容器 div，并将其设置为显示：table-row。然后在表单标签和表单控件上设置display:table-cell。这允许表单像表格一样工作，但仍使用现代 CSS 和 div 结构。

所以它看起来像这样：

<div id="titleArea" style="display: table-row;">
<label for="name" class="label" style="display: table-cell;">Name</label>
<div class="input" style="display: table-cell;">
    <input id="name" type="text" />
</div>

于 2013-10-10T14:30:30.253 回答