html - 无法将 ul li 列表与 div 的顶部对齐

Question

我在将 li 元素与 ul 标签和 div 标签内的顶部对齐时遇到问题。

我的CSS代码:

div{

    background-color: yellow;
}

ul{

    list-style-type: none;
    display: inline;
}

li{
        border: 1px solid       #044062 /*{b-bup-border}*/;
    background:             #396b9e /*{b-bup-background-color}*/;
    font-weight: bold;
    color:                  #fff /*{b-bup-color}*/;
    text-shadow: 0 /*{b-bup-shadow-x}*/ 1px /*{b-bup-shadow-y}*/ 1px /*{b-bup-shadow-radius}*/ #194b7e /*{b-bup-shadow-color}*/;
    background-image: -webkit-gradient(linear, left top, left bottom, from( #5f9cc5 /*{b-bup-background-start}*/), to( #396b9e /*{b-bup-background-end}*/)); /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient( #5f9cc5 /*{b-bup-background-start}*/, #396b9e /*{b-bup-background-end}*/); /* Chrome 10+, Saf5.1+ */
    background-image:    -moz-linear-gradient( #5f9cc5 /*{b-bup-background-start}*/, #396b9e /*{b-bup-background-end}*/); /* FF3.6 */
    background-image:     -ms-linear-gradient( #5f9cc5 /*{b-bup-background-start}*/, #396b9e /*{b-bup-background-end}*/); /* IE10 */
    background-image:      -o-linear-gradient( #5f9cc5 /*{b-bup-background-start}*/, #396b9e /*{b-bup-background-end}*/); /* Opera 11.10+ */
    background-image:         linear-gradient( #5f9cc5 /*{b-bup-background-start}*/, #396b9e /*{b-bup-background-end}*/);
    height:15%;
    position: relative;

}

这是 fiddle : http://jsfiddle.net/agkVd/如您所见，li 元素与 ul 和 div 的底部对齐(我看到 div 背景在顶部，我需要它位于底部)

谢谢...

Answer 1

从 ul 中删除填充，您将看不到任何黄色:

ul {    
   list-style-type: none;
   display: inline;
   padding:0;
}