對於此,星期一早上可能爲時過早。flexbox將文本鏈接到屏幕底部
我已經使用Flexbox的對齊整個頁面而不是單獨的鏈接項目,要對齊的鏈接下方的文本。我認爲垂直對齊:底部工作,但它沒有。
body,* {
margin: 0;
padding: 0;
font-family: sans-serif;
font-weight: normal;
text-transform: uppercase;
}
nav li:nth-child(1) {background: #eee;}
nav li:nth-child(2) {background: #ddd;}
nav li:nth-child(3) {background: #ccc;}
nav li:nth-child(4) {background: #bbb;}
/* Styles */
html,
body,
nav {
width: 100%;
height: 100%;
}
nav ul {
width: 100%;
height: 100%;
list-style: none;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: stretch;
}
nav li {
flex-grow: 1;
}
nav a {
display: block;
height: 100%;
text-align: center;
color: #fff;
text-decoration: none;
vertical-align: bottom
}
nav + div {
position: fixed;
bottom: 100px;
background: #fff;
width: 100%;
text-align: center;
}
<nav>
<ul>
<li><a href="">Link one</a></li>
<li><a href="">Link two</a></li>
<li><a href="">Link three</a></li>
<li><a href="">Link four</a></li>
</ul>
</nav>
<div>
<h1>Heading</h1>
<h2>Sub heading</h2>
</div>
我希望避免USNG彎曲另一個層面下來,如果可能的。 –