Question

我正在尝试创建一个水平导航栏，其中每个菜单选项的标题下方都有一个图标。将鼠标悬停在每个选项上时，该块的背景颜色将发生变化，并且其大小会略有增加。我用百分比确定了所有内容。在我必须垂直对齐菜单选项之前，一切正常。列表高度为导航栏的100％。为了垂直对齐每个选项，我将显示更改为table / table-cell而不是inline-block，但是现在列表下方有一个很小的空间，每个列表项不再占用导航高度的100％悬停背景颜色效果。

Here是显示导航栏外观的屏幕截图。我已经将列表背景变为粉红色以清楚地显示问题，但通常没有颜色只留下绿色背景。悬停在“学习”按钮上的蓝色框应该像我更改显示之前一样延伸到导航栏的边缘。

Here是一个屏幕截图，显示li显示设置为内联块时的样子。这几乎就是我想要的，除非它没有垂直对齐。

这是我的html的简化版本（我拿出了标题和不相关的细节）

<nav class="nav_bar">
    <span id="logo">
        <a href="home.html"><img src="images/nav_bar/logo_img.png"></a>
        <a href="home.html"><img src="images/nav_bar/logo_text.png"></a>
    </span>
    <ul class="nav_menu">
        <li id="learn"><a href="learn.html">LEARN<br><img src="images/nav_bar/learn.png"></a></li
        ><li id="watch"><a href="watch.html">WATCH<br><img src="images/nav_bar/watch.png"></a></li
        ><li id="share"><a href="share.html">SHARE<br><img src="images/nav_bar/share.png"></a></li
        ><li id="more"><a href="more.html">MORE<br><img src="images/nav_bar/more.png"></a></li
        ><li id="active"><a href="home.html">HOME<br><img src="images/nav_bar/home.png"></a></li>
    </ul>
</nav>

这是我的相关css

.nav_menu {
    display: table;
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 35%;
    list-style-type: none;
}
.nav_menu img {
    width: 70%;
}
.nav_menu li {
    display: table-cell;
    height: 100%;
    width: 20%;
    vertical-align: middle;
    overflow: hidden;
}
.nav_menu a {
    display: table-cell;
    height: 100%;
    width: 100%;
    text-align: center;
    font-size: 1.5vw;
    text-decoration: none;
}
.nav_menu a:hover {
    transform: scale(1.1);  
}

#learn a:hover {
    background-color: #69D1ED;
}

我还简单地尝试使用图标作为列表背景图像，但是我在将它们放在文本下方时遇到了太多麻烦。

这是一项作业，因此我仅限于html和css，它必须适用于Chrome，Safari，Firefox，Internet Explorer和Opera。

Answer 1

你需要这样的东西吗？

＆＃13;

body {
  margin: 0;
  padding: 0;
  background: #ccc;
}
 
.nav ul {
  list-style: none;
  background-color: #444;
  text-align: center;
  padding: 0;
  margin: 0;
}
.nav li {
  font-family: 'Oswald', sans-serif;
  font-size: 1.2em;
  line-height: 40px;
  height: 60px;
  border-bottom: 1px solid #888;
}
 
.nav a {
  text-decoration: none;
  color: #fff;
  display: block;
  transition: .3s background-color;
}
 
.nav a:hover {
  background-color: #005f5f;
  transform: scale(1.1);  
}
 
.nav a.active {
  background-color: #fff;
  color: #444;
  cursor: default;
}
 
@media screen and (min-width: 600px) {
  .nav li {
    width: 120px;
    border-bottom: none;
    height: 50px;
    line-height: 50px;
    font-size: 1.4em;
  }
 
  /* Option 1 - Display Inline */
  .nav li {
    display: inline-block;
    margin-right: -4px;
  }

  /* Options 2 - Float
  .nav li {
    float: left;
  }
  .nav ul {
    overflow: auto;
    width: 600px;
    margin: 0 auto;
  }
  .nav {
    background-color: #444;
  }
  */
}

＆＃13;

<div class="nav">
  <ul>
    <li class="home"><a href="#">Home</a></li>
    <li class="tutorials"><a class="active" href="#">Tutorials</a></li>
    <li class="about"><a href="#">About</a></li>
    <li class="news"><a href="#">Newsletter</a></li>
    <li class="contact"><a href="#">Contact</a></li>
  </ul>
</div>

＆＃13;

Demo is over here

如何垂直对齐包含标题和图标图像的水平列表？

1 个答案: