右浮動鏈接變高

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