我想创建一个菜单,菜单项应该放在底部。即使它们有2行或更多行。
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
height: 90px;
width: 100px;
}
li a {
display: block;
color: yellow;
text-align: center;
padding: 14px 16px;
text-decoration: none;
position: relative;
bottom: -40px;
}
li a:hover {
background-color: #111;
}
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">Newsletter & Extras</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
现在,我试图通过使a标签相对并调整底部来实现这一点。但这行不通。
那么,这怎么可能呢,所有的文本都在底部的一条假想线上对齐?
Flexbox可以做到这一点:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
height: 90px;
width: 100px;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
li a {
display: block;
color: yellow;
text-align: center;
padding: 14px 16px;
text-decoration: none;
position: relative;
}
li a:hover {
background-color: #111;
}
<ul>
<li><a href="default.asp">Home</a>
</li>
<li><a href="news.asp">Newsletter & Extras</a>
</li>
<li><a href="contact.asp">Contact</a>
</li>
<li><a href="about.asp">About</a>
</li>
</ul>
ok,找到了解决方案:li必须是相对的,内部的a标签必须是绝对的:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
height: 90px;
width: 100px;
position: relative;
}
li a {
display: block;
color: yellow;
text-align: center;
padding: 14px 16px;
text-decoration: none;
position: absolute;
bottom: 0px;
}
li a:hover {
background-color: #111;
}
使用此代码:
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333;
display: flex;
padding-top: 50px;
flex-wrap: wrap;
}
li a {
display: block;
color: yellow;
text-align: center;
text-decoration: none;
}
li a:hover {
background-color: grey;
}
使用这个li类:
li {
float: left;
height: 90px;
}
只需删除此类的宽度。
检查一下,我已经更改了css,几个朋友可能已经解决了你的问题
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
width:100%;
display: inline-block;
text-align: center;
}
li {
display: inline-block;
width: 100px;
}
li a {
display: block;
color: yellow;
text-align: center;
text-decoration: none;
position: relative;
padding: 10px;
top:5px;
}
li a:hover {
background-color: #111;
}
https://fiddle.jshell.net/Rajkumarrana/12fsmyzg/