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>

This is the result. The "Bad link" is higher then the "Nice link".

如果从身体样式中删除“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>

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

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 个答案: