Question

测试用例

我有3个简单的文本案例如下：

<div style="border: 1px solid #000;">
    <a href="#" style="">Text1</a>
    <a href="#" style="">Text2</a>
    <a href="#" style="float: right">Text3</a>
</div>

在IE8，Firefox（23）中检查这一点，正如预期的那样，Text3链接正确对齐。只要我为链接添加边框，Text3就会向下移动一个像素（边框大小）

<div style="border: 1px solid #000;">
    <a href="#" style="border: 1px solid #000;" href="#" >Text1</a>
    <a href="#" style="border: 1px solid #000;">Text2</a>
    <a href="#" style="border: 1px solid #000; float: right" href="#">Text3</a>
</div>

现在，如果我尝试向链接添加填充，Text3会进一步下降（12像素填充+ 1像素边框）

<div style="padding: 20px 20px 20px 20px; border: 1px solid #000;">
    <a href="#" style="padding: 12px 12px 12px 12px; border: 1px solid #000;">Text1</a>
    <a href="#" style="padding: 12px 12px 12px 12px; border: 1px solid #000;">Text2</a>
    <a href="#" style="padding: 12px 12px 12px 12px; border: 1px solid #000; float: right">Text3</a>
</div>

问题浮动元素时，似乎忽略了填充和边框大小，并使用了元素的实际位置。我有一个多主题网页。用户可以从jQuery UI Theme roller中选择任何主题在每个主题中，我用于项目的样式具有不同的填充大小（和字体大小），这使得无法在CSS中硬编码特定值以使它们保持在同一行。

问题这种行为是否可以避免（我做错了）？是否有解决方法使这些链接保持在同一行（最好只有css）？

Answer 1

如果您将其他a元素设置为display: inline-block，则所有元素的行为都会相同。例如。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

a {display: inline-block; padding: 12px;}

</style>
</head>
<body>

<div style="border: 1px solid #000;">
    <a href="#" style="">Text1</a>
    <a href="#" style="">Text2</a>
    <a href="#" style="float: right">Text3</a>
</div>

</body>
</html>

CSS float将内容向下移动

1 个答案: