gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 05:57:03 24 4
gpt4 key购买 nike

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

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

Here是显示 li 显示设置为 inline-block 时的样子的屏幕截图。这几乎正​​是我想要的,只是它不是垂直对齐的。

这是我的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。

最佳答案

您需要这样的东西吗?

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;
}
*/
}
<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>

Demo is over here

关于html - 如何垂直对齐包含标题和图标图像的水平列表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37009091/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com