1

我需要弄清楚如何将标签文本放在复选框按钮旁边。我需要复选框按钮中间的文本。我总是将复选框放在文本上方或下方。很难在中间找到它。当我在一个浏览器中固定到中间时，在另一个浏览器中它并不完全在中间。总是有一两个像素会破坏它。

这是小提琴 http://jsfiddle.net/JhPHm/

<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

4

3 回答 3

0

我解决这个问题的方法是使用相对定位，如下所示：

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

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

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

祝你好运！

于 2013-01-24T21:37:46.353 回答
0

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

于 2012-10-25T18:44:15.660 回答
0

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

如果问题在于它在旧浏览器中的行为不端，请考虑使用这些浏览器浏览网页的人会在更多地方偶然发现未对齐的复选框，而不仅仅是您的地方。他们正在浏览网页，而网页在他们周围摇摇欲坠。他们不会在意，因为他们要么知道他们使用的是旧浏览器，要么他们没有注意到，因为所有网站都显示这些小故障。

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

最后对我来说，这些东西取决于观众、预算，显然还有复选框的数量。;-)

于 2012-10-25T19:37:33.300 回答