html - 如何将文本对齐到无序列表的顶部？

Question

快速 html 问题:

如何将这个无序列表中的文本与 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;

}

Answer 1

似乎默认情况下是这样，但这应该可以解决所有妨碍的样式。

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

http://jsfiddle.net/uyhHh/