0

我遇到了一个链接问题，当它向右浮动时，它的高度比不向右浮动的链接要高。这是生成它的最少代码：

<!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”，它看起来还不错。但我当然需要字体样式。

4

4 回答 4

2

填充仅适用于块元素，我猜由于浮动，坏链接就像一个块，将 display:block 添加到 .btn 并将好的链接浮动到左侧

http://jsfiddle.net/4Qs5J/

于 2012-09-13T07:35:14.850 回答
1

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

您可以添加display: inline-block;到未浮动的锚点或浮动左侧。内联块将其内联属性保留为锚点，但它允许应用尺寸、填充和边距。IE 7 之后使用 inline 块。

于 2012-09-13T07:37:25.323 回答
0

首先你需要说明身高才能和彼此一样高

向左飘浮;

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

不管怎样，看起来你在做菜单，那怎么办？

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

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

于 2012-09-13T07:48:12.760 回答
0

我以自己的方式做了同样的代码希望它可以帮助

//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>
于 2012-09-13T07:48:47.237 回答