0

当我想添加复选框时，我的布局出现问题。

CSS：

p label {
    vertical-align: middle;
    width: 100px;
    display: inline-block;
    /*display: block;
    padding-top: 8px;
    float: left;*/
}

HTML：

<p>
    <label for="a">a:</label>
    <select name="a" id="a" class="select">
        <option value="">Choose</option>
    </select>
</p>
<p>
    <label for="s">s:</label>
    <select name="s" id="s" class="select">
        <option value="">Choose</option>
    </select>
</p>
<p>
    <label for="d">d:</label>
    <input id="1" type="checkbox" name="looking_for[]" value="1" />
    <label class="no_float" for="1">Friends</label>
    <input id="2" type="checkbox" name="looking_for[]" value="2" />
    <label for="2">Friends</label>
</p>

我希望它看起来像

http://media.smashingmagazine.com/images/web-form-design-patterns/labels-small.jpg

为方便起见，我添加了一个jsfiddle。

4

4 回答 4

1

您为复选框使用了“id=1 和 id=2”。这可能是原因之一，因为数字不适用于 id。试着给出一个有意义的名字，一些字符或字符串。

于 2013-03-23T21:06:28.593 回答
0

这对你来说很好

一：选择

s：选择

d:

<input id="first" type="checkbox" name="looking_for[]" value="1" />Friends<br />

<input id="second" type="checkbox" name="looking_for[]" value="2" />Friends<br />

</p>

CSS是这样的

p label {
vertical-align: middle;
width: 100px;
display: inline-block;}

#second{margin-left:108px;}

/*display: block;
padding-top: 8px;
float: left;*/
}
于 2013-03-23T22:03:15.913 回答
0

你在寻找这样的东西吗？http://jsfiddle.net/3LW8D/1/可能用更少div的 s 和更多的 css 来完成，但由于图像链接不起作用，我只是在猜测你在寻找什么。;)

于 2013-03-23T21:02:20.187 回答
0

也许这就是你的意思，

http://jsfiddle.net/3LW8D/3/

use container div.

是的，即使“user1823799”给出的答案看起来非常相似，但方法上有很大的不同，段落标签在他的例子中被弄乱了，所以我只是重新发明了轮子。

回到你的问题，总是制作一个具有特定大小的容器 div，确保它正确定位在你想要放置元素的位置，如果位置不正确，那么你可以使用 margin/position 属性来修复它，然后将您的小元素嵌套在此容器 div 中。

于 2013-03-23T21:50:10.433 回答