右浮動鏈接變得更高

我有一個鏈接遇到問題，當它向右移動時，會獲得另一個高度而不是浮動到右側的鏈接。下面是最少的代碼生成它：右浮動鏈接變得更高

<!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".

如果我從車身造型看起來OK刪除「宋體」。但我當然需要字體樣式。

來源

2012-09-13 Sten

感謝您指出。我現在已經接受了一些已經回答的問題的答案。 – Sten

填充僅適用於塊元素，我想壞鏈接的行爲像，因爲浮動塊，添加顯示：塊到.btn和浮動不錯鏈接到左邊

http://jsfiddle.net/4Qs5J/

來源

2012-09-13 07:35:14 Gijs

或者使用內聯塊，因爲Kyle Sevenoaks說 – Gijs

或者，您應該閱讀關於浮動對象並查看他們知道的塊對象？在那裏你可以插入一個高填充和任何你喜歡的只是浮動兩個對象 –

浮動元素有效地將它們更改爲塊級元素（如果它們不在之前），所以填充將不適用於普通錨點，但它將浮動到浮動元素。

您可以將display: inline-block;添加到未錨定的錨或浮動一個離開。內聯塊將保持內聯屬性爲錨點，但它將允許應用尺寸，填充和邊距。內嵌塊在IE中使用後第7版

來源

2012-09-13 07:37:25 Kyle

首先你需要國家的高度來獲得高達海誓山盟

浮動：左;

記住的高度也被填充

總之，它看起來像您這樣的菜單，大約只是在做

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

什麼設置，那麼你有一個容器的2個對象

來源

2012-09-13 07:48:12

我用我自己的方式做了相同的代碼，希望它可以幫助

// 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-13 07:48:47

哥們兒不要在1上浮動，然後在另一個上留下，然後他們會在div盒子的每一邊結束，在這裏你想要浮在左邊！ :) –

in'.container a'你有兩次填充... .btn和'.container a'在這種情況下是一樣的，所以顏色也被用於同一個物品兩次。 – Gijs

右浮動鏈接變得更高

回答

相關問題