6

基本上我希望跨度和输入元素占用相同数量的垂直空间，以便正确对齐两个框中的文本。当不浮动元素时，我可以很容易地实现这一点。但是一旦我添加了一个浮点属性，一些额外的像素就会添加到输入元素的高度。我终其一生都无法理解为什么会这样。

我该如何解决？

此问题存在于 iOS 6 上的 Safari 和桌面上的 Chrome。也发生在 Firefox 中，但效果有些不同。

我创建了这个显示我的问题的小提琴。

<input class='float' value="some text" id='input2'/>
<span class='float' id='text2'>some text</span><br />

input, span {
    font-family: Helvetica;
    font-weight: bold;
    font-size: 15px;
    line-height: 15px;
    padding: 0px;
    border: 0px;
}

input {
    text-align: right;
}

.float {
    float: right;
}
4

1 回答 1

2

两件事情。浮动输入似乎给它一个 2px 的边距，你可以很容易地删除它。如果你这样做并删除 line-height 属性，那么一切似乎都在这两个方面排列。

http://jsfiddle.net/cYaa2/4/

input, span {
    font-family: Helvetica;
    font-weight: bold;
    font-size: 15px;
    padding: 0px;
    border: 0px;
}

input {
    text-align: right;
}

.float {
    float: right;
}

input.float {
    margin:0px;
}
于 2013-04-09T15:56:55.323 回答