如何将文本 float 到列表项空间的底部？ 我试图使 li 中的所有文本都位于 li 高度的底部。有没有更好的方法来实现这种外观？ 以及如何超链接 h1 标题？
* {
margin: 0;
padding: 0;
}
nav {
width: 100%;
height: 110px;
background-color: #f0f0f0;
}
.menu ul {
margin-left: 50px;
}
.menu ul li {
height: 110px;
list-style: none;
float: left;
}
.menu ul li a {
text-decoration: none;
font-family: 'Segoe UI';
padding-left: 18px;
padding-right: 18px;
margin-top: 110px;
color: black;
}<nav class="menu">
<ul class="menu">
<li><img src="{% static 'images/logo-01.png' %}" width="120px" height="120px"></li>
<li>
<a class="header" href="#">
<h1>Sitename</h1>
</a>
</li>
<li><a href="#">option1</a></li>
<li><a href="#">option2</a></li>
<li><a href="#">option3</a></li>
<li><a href="#">option4</a></li>
</ul>
</nav>最佳答案
您只需对 CSS 进行一些微小的更改。我添加了 display: flex; 和 align-items: flex-end;
由于flexbox是一个完整的模块而不是单个属性，因此它涉及很多东西，包括它的整套属性。其中一些旨在在容器(父元素，称为“flex 容器”)上设置，而另一些则旨在在子元素上设置(称为“flex items”)。
您可以通过以下链接了解有关 Flexbox 布局的更多信息。
https://www.w3schools.com/css/css3_flexbox.asp
* {
margin: 0;
padding: 0;
}
nav{
width: 100%;
background-color: #f0f0f0;
}
.menu ul{
margin-left: 50px;
display: flex;
align-items: flex-end;
}
.menu ul li {
list-style: none;
}
.menu ul li img {
display: block;
}
.menu ul li h1 {
line-height: 1;
}
.menu ul li a {
display: block;
text-decoration: none;
font-family: 'Segoe UI';
padding-left: 18px;
padding-right: 18px;
color: black;
}
.menu ul li:hover a {
color: red;
}
.menu ul li:hover h1 {
color: black;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<nav class="menu">
<ul class="menu">
<li><img src="http://placehold.jp/120x120.png" width="120px" height="120px"></li>
<li><a class="header" href="#"><h1>Sitename</h1></a></li>
<li><a href="#">option1</a></li>
<li><a href="#">option2</a></li>
<li><a href="#">option3</a></li>
<li><a href="#">option4</a></li>
</ul>
</nav>
</body>
</html>我希望这会有所帮助。
关于html - 如何将文本 float 在列表项空间的底部？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59475256/