列出HTML中的溢出

Question

我创建了一个水平菜单和一个垂直菜单，在这两种情况下我注意到元素没有正确渲染，水平菜单太大了：

<ul class="menu-horizontal">
<li>Home</li>
<li>About Us</li>
<li>Recent Articles</li>
<li>Email</li>
<li>Resources</li>
<li>Links</li>
</ul>

.menu-horizontal
{
background:blue;
width:926px;
height:30px;
overflow:hidden;
list-style: none;

}

.menu-horizontal li
{
display:inline-block;
text-align:center;
font-weight:bold;
padding:7px 45px;
color:white;
font-size:14px;
border-right:1px solid black;

}

我向右移动了一个列表，在这种情况下，我发现垂直菜单没有到达它的左边界：

.menu-vertical
{
list-style:none;
float:right;
border:1px solid black;
width:200px;
height:auto;
margin-left:10px;
}

.menu-vertical li
{
padding-top:10px;
font-weight:4;
font-size:1.25em;
text-align: center;
text-decoration: underline;
color:blue;
background-color: #bfbbc9;
}

<ul class="menu-vertical group">
 <li>Lorem</li> 
 <li>ipsum</li>
 <li>dolor</li>
 <li> sit amet</li>
 <li> consectetur</li>
 <li> adipiscing</li>
 <li> elit</li> 
</ul>

整个HTML和CSS位于fiddle。

Answer 1

确保删除或覆盖浏览器默认设置，例如填充。 E.g。

.menu-horizontal {padding: 0; margin: 0;}