如何在列表项空间的底部浮动文本? [英] How to float text at the bottom of the list item space?
问题描述
如何在列表项空间的底部浮动文本?我正在尝试使li中的所有文本都位于li高度的底部.有没有更好的方法来实现那种外观?以及如何超链接h1标头?
How to float text at the bottom of the list item space? I am trying to make all text in li stand at the bottom of the li height. Is there any better way to achieve that look? And how to hyperlink an h1 header?
* {
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;
You just need to do minor changes to your CSS. I have added display: flex; and align-items: flex-end;
由于flexbox是一个完整的模块，而不是单个属性，因此它涉及很多事情，包括其整个属性集.其中一些应该放置在容器上(父元素，称为柔性容器")，而其他一些则放置在孩子上(称为柔性物品").
Since flexbox is a whole module and not a single property, it involves a lot of things including its whole set of properties. Some of them are meant to be set on the container (parent element, known as "flex container") whereas the others are meant to be set on the children (said "flex items").
您可以从下面的链接中了解有关Flexbox布局的更多信息.
You can learn more about the flexbox layout from the below link.
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>我希望这会有所帮助.
这篇关于如何在列表项空间的底部浮动文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
