右浮动链接变高

Question

我遇到一个链接问题，该链接在向右浮动时会比未向右浮动的链接增加另一个高度。 这是产生它的最少代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        body {font: normal 12px/1.6 Arial; }
        .btn {background-color: Red; color:#000; padding: 5px 15px 5px 15px; }
    </style>
</head>
<body>
    <div>
        <a class="btn" href="#">Nice link</a>
        <a class="btn" style="float: right;" href="#">Bad link</a>
    </div>
</body>
</html>

这就是结果。 “不良链接”高于“良好链接”。

如果我从身体样式中删除“ Arial”，看起来还可以。 但是我当然需要字体样式。

Answer 1

填充仅适用于块元素，并且我猜错误的链接由于浮动而像块一样，将display：block添加到.btn并将漂亮的链接浮动到左侧

http://jsfiddle.net/4Qs5J/

Answer 2

浮动元素有效地将其更改为块级元素（如果之前没有），则填充将不会应用于普通锚，但会应用于浮动锚。

您可以添加display: inline-block; 到未漂浮的锚点或漂浮在那一个左边。 内联块将保留其内联属性作为锚点，但是它将允许应用尺寸，填充和边距。 在版本7之后的IE中使用内联块。

Answer 3

首先，您需要声明身高以达到彼此的高度

向左飘浮;

请记住，高度也是通过填充设置的

无论如何，看起来您正在制作菜单，该怎么办

<ul>
<li style="float:left;"></li>
<li style="float:left;"></li>
</ul>

然后你有一个容器到你的两个对象

Answer 4

我以自己的方式做了同样的代码，希望对您有所帮助

// css

    <style>
        body { font-family:Arial, Helvetica, sans-serif; font-size:14px; }
        .container { height:40px;}
        .container a{ color:#FFF; padding:10px; padding:7px; }
        .btn {background-color: Red; color:#000;   }
    </style>

// HTML

    <div class="container">
        <a class="btn" href="#" style="float: left;">Nice link</a>
        <a class="btn" style="float: right;" href="#">Bad link</a>
    </div>

右浮动链接变高

问题描述

4 个解决方案

解决方案1
2 已采纳 2012-09-13 07:35:14

解决方案2
1 2012-09-13 07:37:25

解决方案3
0 2012-09-13 07:48:12

解决方案4
0 2012-09-13 07:48:47

右浮动链接变高

问题描述

4 个解决方案

解决方案1 2 已采纳 2012-09-13 07:35:14

解决方案2 1 2012-09-13 07:37:25

解决方案3 0 2012-09-13 07:48:12

解决方案4 0 2012-09-13 07:48:47

解决方案1
2 已采纳 2012-09-13 07:35:14

解决方案2
1 2012-09-13 07:37:25

解决方案3
0 2012-09-13 07:48:12

解决方案4
0 2012-09-13 07:48:47