如何在无序列表中将文本对齐到顶部？

我该如何将这个无序列表中的文本对齐到div的顶部？

<div id="menucontainer"> 
       <ul id="menu"> 
        <li style="vertical-align:top"><a href="/">Home</a></li> 
        <li><a href="/Home/About">About</a></li> 
       </ul> 
      </div> 



/* TAB MENU 
----------------------------------------------------------*/ 
ul#menu { 
    border-bottom: 1px #5C87B2 solid; 
    padding: 0 0 2px; 
    position: relative; 
    margin: 0; 
    text-align: right; 
} 

ul#menu li { 
    display: inline-block; 
    list-style: none; 
    vertical-align:top; 

} 

ul#menu li#greeting { 
    padding: 10px 20px; 
    font-weight: bold; 
    text-decoration: none; 
    line-height: 2.8em; 
    color: #fff; 

} 

ul#menu li a { 
    padding: 10px 20px; 
    font-weight: bold; 
    text-decoration: none; 
    line-height: 2.8em; 
    background-color: #e8eef4; 
    color: #034af3; 
    -webkit-border-radius: 4px 4px 0 0; 
    -moz-border-radius: 4px 4px 0 0; 
    border-radius: 4px 4px 0 0; 

}

来源

2013-02-05 Pindakaas

移动'align'语句来'div'，而不是'li' – Floris

看起来像默认情况下那样，但是这应该可以解决任何妨碍操作的风格。

ul#menu li {display: inline-block; vertical-align: top;}

http://jsfiddle.net/uyhHh/

来源

2013-02-05 03:53:26 isherwood

这个例子并没有真正显示任何东西，因为它是一个默认值。如果您尝试将“vertical-align”更改为“middle”，它将不会改变。 –

同意。尚不清楚原始问题中的问题是什么。我希望这会揭示一些有关这方面的信息。 – isherwood

对不起忘了放入css规则 – Pindakaas

如何在无序列表中将文本对齐到顶部？

回答

相关问题