html – 将菜单文本对齐到li的底部

概述我试图将一些文本对齐li的底部(用绿色边框标记),但是“vertical-align：bottom”不起作用,“position：absolute; bottom：0”导致文本堆积在li之外.我究竟做错了什么？ Jsfiddle：http://jsfiddle.net/eternal_noob/dog42xeh/ HTML： <div class="head"><div class="logo" 我试图将一些文本对齐li的底部(用绿色边框标记),但是“vertical-align：bottom”不起作用,“position：absolute; bottom：0”导致文本堆积在li之外.我究竟做错了什么？

Jsfiddle：http://jsfiddle.net/eternal_noob/dog42xeh/

HTML：

<div ><div >  <a href="/" title="Back to homepage">    <img src="http://www.dIErenasIElamsterdam.nl/files/homepage/Poes-virtueel-asIEl.jpg">    </a></div><div >    <div >  <span>(999)999-9999 / (999)999-9999</span>    </div>    <div >        <ul >            <li><a href="a.PHP">Abyssinian</a>            </li>            <li><a href="b.PHP">Munchkin</a>            </li>            <li><a href="c.PHP">Persian</a>            </li>            <li><a href="d.PHP">Siamese</a>            </li>            <li><a href="e.PHP">About</a>            </li>        </ul>    </div></div>

CSS：

.head {    text-align: center;    height: 150px}    .head:before {    content:'';    display: inline-block;    height: 100%;    vertical-align: mIDdle;    margin-right: -0.25em}.logo {    display: inline-block;    vertical-align: mIDdle;    height: 100px;    wIDth: 350px;}.nav {    display: inline-block;    vertical-align: mIDdle;    height: 100px;    wIDth: 600px;}.icon-top {    line-height:29px;    padding-right:20px;    color:#333;    Font-size:15px;    text-align:right;}.menu {    position: relative;    text-align:right;}.menu-header {    height:50px;}.topmenu {    display: inline-block;    height:65px;    margin:0;    padding:0;    Font-size: 20px;}.topmenu li {    display: inline-block;    height:100%;    List-style:none;    margin-left:20px;    border: solID 1px green;}.topmenu li a {    color: #000000;    vertical-align:text-bottom;}.topmenu li a:hover {    color:#b574d4;}

解决方法 您可以像这样添加行高：

.topmenu li a {     color: #000000;    line-height: 110px;/*Add this*/}

fiddle

另一个解决方案是使用table-cell：

.menu {    position: relative;    display: table;/*Add display table*/    margin: 0 auto;/*Add margin 0 auto to align to the mIDdle of the page*/}    .topmenu {    display: table-row;/*Add display table-row*/    height:65px;    margin:0;    padding:0;    Font-size: 20px;}.topmenu li {    display: table-cell;/*Add display table-cell*/    /*height:100%; Remove height*/    List-style:none;    margin-left:20px;    border: solID 1px green;    vertical-align: bottom;/*Add vertical-align bottom*/}

fiddle

看看这里：Understanding vertical-align,or “How (Not) To Vertically Center Content”

总结

以上是内存溢出为你收集整理的html – 将菜单文本对齐到li的底部全部内容，希望文章能够帮你解决html – 将菜单文本对齐到li的底部所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。