1

我目前有一个设置很像以下小提琴的表单：http: //jsfiddle.net/8bbaF/2/

我试图让每个输入框在它们之间有一定数量的空白。目前，格式基于每个标签的长度。我希望格式与标签长度无关。标签当前位于输入框的顶部，它们必须保留在那里。任何帮助将不胜感激。

<div class="inputForm">
<form id="newInput">

    <div class="inputFields">
        <label for="lists">Lists<input name="lists"/></label>
        <label for="new1">New Field 1<input name="new1"/></label>

    </div>
    <div class="inputFields">
        <label for="lists">Listswqwerqwer<input name="lists"/></label>
        <label for="new1">New Field 1<input name="new1"/></label>

    </div>

</form>

CSS：

.inputForm label{
    display:inline-block;
}
div.inputFields{
    display:inline-block;
}
.inputFields input{
    padding-right:3%;
}
4

3 回答 3

2

不要将输入字段放在标签内。它造成了很多问题。看看这个：http: //jsfiddle.net/8bbaF/6/

<div class="inputForm">
<form id="newInput">

    <div class="inputFields">
        <label for="lists">Lists</label><input name="lists"/>
        <label for="new1">New Field 1</label><input name="new1"/>

    </div>
    <div class="inputFields">
        <label for="lists">Lists</label><input name="lists"/>
        <label for="new1">New Field 1</label><input name="new1"/>

    </div>

</form>

于 2013-03-14T21:24:52.100 回答
1

为每个inputFields容器设置一个边距并稍微调整您的 CSS：

CSS

.inputFields {
    display: inline-block;
    margin-right: 15px;
}

.inputFields label,
.inputFields input {
    display: block;
}

演示

于 2013-03-14T21:21:00.023 回答
1

这是一种方法：

<div class="inputForm">
    <form id="newInput">
        <div class="inputFields">
            <label for="lists">Lists</label>
            <input name="lists" />
        </div>
        <div class="inputFields">
            <label for="new1">New Field 1</label>
            <input name="new1" />
        </div>
        <div class="inputFields">
            <label for="lists">Listswqwerqwer</label>
            <input name="lists" />
        </div>
        <div class="inputFields">
            <label for="new1">New Field 1</label>
            <input name="new1" />
        </div>
    </form>
</div>

使用 CSS

div.inputFields {
    display: inline-block;
    margin-right: 20px;
    width: 40%;
    margin: 10px;
    border: 1px solid gray;
}

.inputForm label {
    display: block;
}
.inputFields input {
    display: block;
    width: 90%;
}

还有小提琴：http: //jsfiddle.net/audetwebdesign/pg8Kh/

我看到其他人首先带着基本相同的想法来到这里。根据您希望如何在布局网格上放置字段，存在一些变化。

但是，关键是将 保留<label>为单独的元素。

于 2013-03-14T21:35:11.543 回答