2016-11-14 16 views
0

對於此,星期一早上可能爲時過早。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>

回答

2

您可以使用display: flex;nav li a鏈接,就像:

nav li a { 
    display: flex; 
    justify-content: center; 
    align-items: flex-end; 
} 

看一看下面的代碼片段:

body, 
 
\t \t * {margin: 0; padding: 0; font-family: sans-serif; font-weight: normal; text-transform: uppercase;} 
 
\t \t nav li:nth-child(1) {background: #eee;} 
 
\t \t nav li:nth-child(2) {background: #ddd;} 
 
\t \t nav li:nth-child(3) {background: #ccc;} 
 
\t \t nav li:nth-child(4) {background: #bbb;} 
 
/* Styles */ 
 
\t \t html, 
 
\t \t body, 
 
\t \t nav {width: 100%; height: 100%;} 
 
\t \t nav ul {width: 100%; height: 100%; list-style: none; 
 
\t \t \t display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch;} 
 
\t \t nav li {flex-grow: 1;} 
 
\t \t nav a {display: block; height: 100%; text-align: center; color: #fff; text-decoration: none; vertical-align: bottom} 
 

 
\t \t nav + div {position: fixed; bottom: 100px; background: #fff; width: 100%; text-align: center;} 
 

 

 
nav li a { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: flex-end; 
 
}
<nav> 
 
\t \t <ul> 
 
\t \t \t <li><a href="">Link one</a></li> 
 
\t \t \t <li><a href="">Link two</a></li> 
 
\t \t \t <li><a href="">Link three</a></li> 
 
\t \t \t <li><a href="">Link four</a></li> 
 
\t \t </ul> 
 
\t </nav> 
 
\t <div> 
 
\t \t <h1>Heading</h1> 
 
\t \t <h2>Sub heading</h2> 
 
\t </div>

希望這有助於!

+0

我希望避免USNG彎曲另一個層面下來,如果可能的。 –

0

只需更換爲的CSS導航一個

nav a { 
    height: 100%; 
    text-align: center; 
    color: #fff; 
    text-decoration: none; 
    display: -webkit-flex; 
    /* Safari */ 
    -webkit-align-items: center; 
    /* Safari 7.0+ */ 
    display: flex; 
    align-items: center; 
} 
0

\t \t body, 
 
\t \t * {margin: 0; padding: 0; font-family: sans-serif; 
 
     font-weight:normal; text-transform: uppercase;} 
 
\t \t nav li:nth-child(1) {background: #eee;} 
 
\t \t nav li:nth-child(2) {background: #ddd;} 
 
\t \t nav li:nth-child(3) {background: #ccc;} 
 
\t \t nav li:nth-child(4) {background: #bbb;} 
 
/* Styles */ 
 
\t \t html, 
 
\t \t body, 
 
\t \t nav {width: 100%; height: 100%;} 
 
\t \t nav ul {width: 100%; height: 100%; list-style: none; 
 
\t \t display: flex; flex-direction: row; flex-wrap: nowrap; 
 
     align- items: stretch;} 
 
\t \t nav li { 
 
     flex-grow: 1; 
 
     display: flex; 
 
     } 
 
\t \t nav a { 
 
     color: #ffffff; 
 
     display: block; 
 
     align-self: end; 
 
     text-align: center; 
 
     text-decoration: none; 
 
     vertical-align: bottom; 
 
     empty-cells: 0; 
 
     width: 100%; 
 
     } 
 

 
\t \t nav + div {position: fixed; bottom: 100px; background: #fff; 
 
     width: 100%; text-align: center;}
\t <nav> 
 
\t \t <ul> 
 
\t \t \t <li><a href="">Link one</a></li> 
 
\t \t \t <li><a href="">Link two</a></li> 
 
\t \t \t <li><a href="">Link three</a></li> 
 
\t \t \t <li><a href="">Link four</a></li> 
 
\t \t </ul> 
 
\t </nav> 
 
\t <div> 
 
\t \t <h1>Heading</h1> 
 
\t \t <h2>Sub heading</h2> 
 
\t </div>