Question

我创建了一个导航栏，然而，我在CSS中使用了display：标签，因此我无法将其用作块来创建框样式链接。还有其他方法吗？我目前的代码是：

CSS：

    ul.nav{
  border:1px solid #ccc;
  border-width:1px 0;
  list-style:none;
  margin:0;
  padding:0;
  text-align:center;
  width: 100%;
  display: table; 
table-layout: fixed;
}
/* this styles each link when the mouse is NOT hovered over */
li.nav{
  display:block; text-align: center; 

}
/* Leave this alone fgt */
li.nav{
  display:block;
  padding:10px;
  display: table-cell; text-align: center; 
}
/* style of the hovered link. Change background colour rom black to whatever.  */
li.nav:hover {
    background-color: #0099FF;
    display:block; text-align: center; 
}

HTML：

<ul class="nav">
<li class="nav"><a href="#home">Home</a></li>
<li class="nav"><a href="#news">News</a></li>
<li class="nav"><a href="#contact">Contact</a></li>
<li class="nav"><a href="#about">About</a></li>
</ul>

Answer 1

您需要添加以下类：

li a {
    display:block;

    width:100%;
}

li a:hover {
    background-color: #0099FF;
}

并删除属性

padding:10px;

来自li.nav类。

这会给你你想要的东西。

您可以在此处查看：http://jsfiddle.net/fTMQG/

希望这有帮助!!!

如何在不使用display：block的情况下创建CSS框链接

1 个答案: