Question

我正在尝试创建一个具有以下属性的水平导航栏：

锚文本在列表中水平和垂直居中项目。
整个列表项是可点击的链接。
在悬停时，将交换列表项的背景颜色和锚文本的颜色。

这是fiddle，只能成功完成＃2。我找到＃1的解决方案似乎都没有用。＃3逃脱了我。

建议表示赞赏。

以下是工作代码：

＆＃13;

#navbar ul {
  list-style-type: none;
  display: table;
}
    
#navbar li {
  display: table-cell;
  float: left;
  width: 200px;
  height: 50px;
  text-align: center;
  background-color: #f0e68c;
}
    
#navbar li:hover {
  background-color: black;
}
    
#navbar li a {
  display: block;
  text-decoration: none;
  color: black;
}

＆＃13;

<div id="navbar">
  <ul>
    <li><a href="#intro">Intro</a></li>
    <li><a href="#bio">Bio</a></li>
    <li><a href="#issues">Issues</a></li>
  </ul>
</div>

＆＃13;

Answer 1

你可以使用这个CSS。请检查此链接https://jsfiddle.net/oynd1sq6/

#navbar li:hover a{
color:#ffffff;
}

Answer 2

以下代码适用于html

<ul class="nav">
  <li><a href="/">Home</a></li>
  <li><a href="/about/">About</a></li>
  <li><a href="/work/">Work</a></li>
  <li><a href="/clients/">Clients</a></li>
  <li><a href="/contact/">Contact</a></li>
</ul>

以下代码适用于css

.nav{
    border:1px solid #ccc;
    border-width:1px 0;
    list-style:none;
    margin:0;
    padding:0;
    text-align:center;
}
.nav li{
    display:inline;
}
.nav a{
    display:inline-block;
    padding:10px;
}

试试这个我希望它能为你效用

Answer 3

试试这个...刚改变了你的css

t = --above value--

https://fiddle.jshell.net/ofp184pn/1/

Answer 4

您可以使用以下CSS获取您想要的所有3件事。

    #navbar ul
    {
        list-style-type: none;
        display: table;
    }
    #navbar li{
        float: left;
        text-align: center;
    }

    #navbar li a
    {
        display: table-cell;
        width: 200px;
        height: 50px;
        text-decoration: none;
        color: black;
        vertical-align: middle;
        background-color: #f0e68c;
    }

    #navbar li a:hover{
        color: #f0e68c;
        background-color: black;
    }

我已使用vertical-align: middle将文本垂直对齐，并将li样式设置为a标记以实现此目的。

在这里小提琴：http://jsfiddle.net/MasoomS/6mn0fun4/1/

Answer 5

只需要进行两次修改即可。

完成＃1：

使锚的线高与li标签的线高相同。即50px

完成＃3

为锚添加样式规则。

#navbar li:hover a{
    color:#f0e68c;
}

Here是小提琴

#navbar ul {
  list-style-type: none;
  display: table;
}
#navbar li {
  float: left;
  width: 200px;
  height: 50px;
  text-align: center;
  background-color: #f0e68c;
  ;
}
#navbar li:hover {
  background-color: black;
}
#navbar li a {
  display: inline-block;
  text-decoration: none;
  color: black;
  line-height: 50px;
  /*Make the line height same as height of li tag*/
}
/*Add style for anchor*/

#navbar li:hover a {
  color: #f0e68c;
}

<body>

  <div id="statement">

    <div id="navbar">
      <ul>
        <li><a href="#intro">Intro</a>
        </li>
        <li><a href="#bio">Bio</a>
        </li>
        <li><a href="#issues">Issues</a>
        </li>
      </ul>
    </div>

  </div>

</body>

</html>

Answer 6

仅更新了您的代码...

对于颜色悬停效果添加：

#navbar li a:hover{
    color: #f0e68c;
    background-color: black;
}

对于水平对齐，您应该在“#navbar li”选择器中添加“line-height”和“vertical-align”属性：

#navbar li
{
    display: table-cell;
    float: left;
    width: 200px;
    height: 50px;
    text-align: center;
    background-color: #f0e68c;
    line-height: 50px;
    vertical-align: middle;
}

JsFiddle

Answer 7

你的所有3个问题都解决了。看看

#navbar ul{
list-style-type: none;
float:left;
}

#navbar li{ width: 100px;
height: 50px;
text-align: center;
background-color: #f0e68c;
float:left;
}

#navbar li:hover{
background-color: black;
}

#navbar li a{
display: inline-block;
text-decoration: none;
height:100%;
color: black;
}

#navbar li a:before{ 
 height:100%;
 vertical-align:middle;
 content:'';
 display:inline-block;
 }

水平导航栏：如何居中文本和设置颜色

7 个答案: