Question

我目前的表单设置与以下小提琴的设置非常相似：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%;
}

Answer 1

不要将输入字段放在标签内。它造成了很多问题。看看这个：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>

Answer 2

为每个inputFields容器设置一个固定边距并稍微调整一下CSS：

<强> CSS

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

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

<强> DEMO

Answer 3

这是一种方法：

<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>作为单独的元素保留。

基于标签而不是输入框css的填充

3 个答案: