Question

我需要弄清楚如何在复选框按钮旁边放置标签文字。我需要复选框按钮中间的文本。我总是把复选框放在文本上方或稍低于它的位置。很难把它完全放在中间。当我在一个浏览器中修复到中间时，在其他浏览器中它并不完全在中间。总有一两个像素会破坏它。

<style>
.field input
{
    margin: 0;
    padding: 0;
    vertical-align: top;
}
.field label
{
    margin: 0;
    padding: 0;
    vertical-align: top;
    font: normal 12px/14px arial;
}
</style>

<div style="padding: 30px;">

<div class="field">
    <label for="x"><input type="checkbox" id="x" name="x" value="1" /> Text in the middle</label>
</div>

</div>

请帮助我在所有浏览器中间显示文本。这里有一张差异图片： http://img708.imageshack.us/img708/5410/checkbox.png

Answer 1

而不是vertical-align:top，请尝试vertical-align:middle。它可能会有所帮助，但输入元素因浏览器不均匀而臭名昭着。

Answer 2

对齐输入元素很难，有时几乎不可能。

如果问题是它在旧浏览器中行为不端，请考虑使用这些浏览器浏览网页的人会发现错误的复选框位于更多地方，而不仅仅是你的。他们正在浏览网页，而它们正在摇摇欲坠，可以这么说。他们不会关心，因为他们要么知道他们使用旧浏览器，要么他们没有注意到，因为所有网站都显示这些小故障。

如果您需要为各种浏览器添加各种调整和修复以获得可接受的最终结果，还要考虑所有这些调整都会增加CSS的大小和复杂性使其变得更加困难保持未来。

最后对我来说，这些东西取决于观众，预算和明显的复选框数量。 ; - ）

Answer 3

我对此的攻击方式是使用相对定位，如下所示：

input[type="radio"], input[type="checkbox"] {
    cursor: pointer;
    line-height: normal;
    margin: 0px;
    position: relative;
    top: -3px;
}

例如，如果您想将它们向上移动3个像素。就像你上面指出的那样，你可能会在不同的浏览器中得到不同的结果。

在这种情况下，Firebug或Chrome开发者工具将为您提供很多帮助。你可能会从其他地方继承一些垃圾。就像上面的例子一样，我将边距设置回0px，因为CSS结构中更高（并且不可避免）的东西在所有输入上设置了4px的边距并且让我感到困惑。

祝你好运！

复选框中间带有标签

3 个答案: