無法設置鏈接的寬度是相同的

我試圖創建按鈕樣式鏈接橫向導航菜單，但我不能設法讓他們都具有相同的寬度。我沒有使用「width：px」的運氣，因爲它似乎不適用於鏈接。有什麼建議麼？無法設置鏈接的寬度是相同的

感謝

HTML：

<!DOCTYPE html> 

<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="style.css" /> 
    <script type = "text/javascript" src="jquery.js"></script> 
    <title></title> 
</head> 

<body> 
    <div class="main"> 

     <div class="header"> 
     <img src="images/logo.jpg" /> 
     </div> 

     <div class="navigation"><ul id = "linkbar"> 
     <li><a href="">Home</a></li> 
     <li><a href="">Links</a></li> 
     <li><a href="">Guestbook</a></li> 
     <li><a href="">Contact</a></li></ul> 
     </div> 

    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, 

feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae 

est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum</a> 

    </div> 

</body> 

</html>

CSS：

body { 
    background-color: lightgray; 

    margin:0px; 
    padding:0px; 

} 

.header { 
    background-color:white; 
} 

.header img { 
    vertical-align: top; 
} 

.main { 
    background-color: limegreen; 
    text-align: center; 
    width: 900px; 
    margin: auto; 
} 
    a:link {color:white; text-decoration:none;}  /* unvisited link */ 
    a:visited {color:white; text-decoration:none;} /* visited link */ 
    a:hover {color:red; text-decoration:underline;} /* mouse over link*/ 
    a:active {color:red; text-decoration:underline;} /* selected link */ 

.navigation { 
    text-align: center; 
    background-color: #f8901f; 
    /*background-image:url('images/navbar.jpg');*/ 
} 

#linkbar a { 
       padding: 14px 0px 13px 0px; 
    text-decoration: none; 
    text-align: center; 
    text-transform: uppercase; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 12px; 
    font-weight: bold; 
    color: #000000; 
    border: none; 
} 

#linkbar { 
    margin-top: 0; 
} 

#linkbar li { 
    padding: 11px 0px 10px 0px; 
    list-style-type: none; 
    display: inline; 
    line-height: 2.5em; 
} 

#linkbar a:hover, #linkbar .current_page_item a { 
    background: url(images/img05.gif) repeat-x left top; 
    text-decoration: none; 
    color: #FFFFFF; 
}

來源

2011-04-16 tim

你可以使鏈接'直列block's：'顯示：內聯塊;'（在IE> = 8作品）。 – Rudie 2011-04-16 22:15:07

@Rudie - 我們不能忘記IE預IE9？：S：P – 2011-04-16 22:17:52

這是因爲一個標籤是display: inline默認情況下，因此不能採取的寬度。

見最後兩行：

#linkbar a { 
    padding: 14px 0px 13px 0px; 
    text-decoration: none; 
    text-align: center; 
    text-transform: uppercase; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 12px; 
    font-weight: bold; 
    color: #000000; 
    border: none; 
    display: inline-block; 
    width: 100px; 
}

http://jsfiddle.net/3gwfY/

來源

2011-04-16 22:13:13

感謝!!!!!!!!! – tim 2011-04-16 22:25:54

設置寬度：..在<李>元素PX財產，而不是在一個<元素>。

來源

2011-04-16 22:13:00

鏈接是inline元素。他們不能有一個設定的寬度，這就是爲什麼你的代碼不工作。

試着將它們inline-block：

.navigation a { 
    display: inline-block 
}

不過，就個人而言，我的風格標籤<li>而不是鏈接。當我撥弄<a>這樣的標籤時，我感覺不太對勁......

來源

2011-04-16 22:13:26 Blender

我同意，在LI標籤是更好的風格，除非OP希望整個寬度作爲一個鏈接，在這種情況下，一個標籤就需要進行修改。 – 2011-04-16 22:16:24

默認情況下，<a>元素（鏈接）是內聯元素，它不接受寬度值。使用display: inline-block。

來源

2011-04-16 22:14:15

嘗試這些變化：

http://jsfiddle.net/TXSkr/

來源

2011-04-16 22:21:23

無法設置鏈接的寬度是相同的

回答

相關問題