Question

我正在尝试使用按钮样式链接创建水平导航菜单，但我无法将它们全部设置为相同的宽度。我使用“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;
}

Answer 1

这是因为A标签默认为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/

Answer 2

在＆lt; li＆gt;上设置width：.. px属性元素，而不是＆lt; a＆gt;元件。

Answer 3

链接是inline元素。它们不能设置宽度，这就是您的代码无法正常工作的原因。

尝试制作inline-block：

.navigation a {
  display: inline-block
}

但是，就个人而言，我会设置<li>标签而不是链接。当我像这样标记<a>标签时，我感觉不对...

Answer 4

默认情况下，<a>元素（链接）是内联元素，不接受宽度值。使用display: inline-block。

Answer 5

尝试以下更改：

http://jsfiddle.net/TXSkr/

无法将链接的宽度设置为相同

5 个答案: