CSS float 下移内容答案

【问题标题】：CSS float moves content downCSS float 下移内容
【发布时间】：2014-02-21 03:45:10
【问题描述】：

测试用例

我有 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）？

【问题讨论】：

标签： html css jquery-ui

【解决方案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>

【讨论】：

谢谢，你的回答解决了