logo标签列表

无法设置链接的宽度相同

htmlcss
3

我正在尝试创建一个水平导航菜单，其中包含按钮样式的链接，但我无法让它们都具有相同的宽度。使用"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;
}
你可以将链接设置为 inline-block：display: inline-block;（适用于 IE >= 8）。 - Rudie
@Rudie - 我们能不能忘记IE 9之前的版本呢？ :S :P - Jared Farrish
5个回答
7

这是因为默认情况下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/

1

链接是内联元素。它们不能有固定的宽度，这就是为什么你的代码不起作用的原因。

尝试将它们设置为inline-block：

.navigation a {
  display: inline-block
}

但是，就我个人而言，我会为 <li> 标签添加样式而不是为链接添加样式。我只是觉得这样调整 <a> 标签不太对...

我同意，LI标签更容易进行样式设计，除非原帖想要整个宽度都作为链接，这种情况下需要修改A标签。 - Jared Farrish
1
在
  • 元素上设置宽度为..px的属性，而不是在元素上。
    • 1
    默认情况下，<a>元素（链接）是内联元素，不接受宽度值。请使用display: inline-block。
    0
    网页内容由stack overflow 提供, 点击上面的
    可以查看英文原文，
    原文链接