CSS水平列表不显示在Chrome浏览器中的水平在Firefox浏览器上显示为水平

问题描述：

您好我想创建一个工具栏使用ul和li元素，一切工作良好的IE8，但是当我在谷歌浏览器中呈现页面o firefox元素不显示在水平的方式。这是我用于工具栏的CSS。CSS水平列表不显示在Chrome浏览器中的水平在Firefox浏览器上显示为水平

div.Toolbar 
{ 
    padding: 4px; 
} 

div.Toolbar ul 
{ 
    list-style: none; 
    margin: 0px; 
    padding: 0px 10px 0px 0px; 
    width: 100%; 
} 

div.Toolbar ul li a, div.leftMenu ul li a:visited 
{ 
    border: 1px solid #f0f5f8; 
    display: block; 
    line-height: 1.35em; 
    padding: 5px 5px; 
    text-decoration: none; 
    white-space: nowrap; 
    float: left; 
} 

div.Toolbar ul li a:hover 
{ 
    background-color: #FFFF99; 
    border: 1px solid #FFCC00; 
    text-decoration: none; 
    padding-right: 5px; 
    float: left; 
} 

div.Toolbar ul li a:active 
{ 
    border: 1px solid #f0f5f8; 
    text-decoration: none; 
    float: left; 
} 


<div class="Toolbar"> 
    <ul> 
     <li> 
      <asp:LinkButton ID="lnkNuevaOrden" runat="server" Visible="False"> 
       <img runat="server" id="img12" border="0" src="~/images/icons/action_add.gif" /> 
       Nuevo Registro 
      </asp:LinkButton> 
     </li> 

     <li> 
      <asp:LinkButton ID="lnkCambiarContrasena" runat="server" Visible="False" CausesValidation="False"> 
       <img runat="server" id="img11" src="~/images/icons/login.gif" border="0" /> 
       Cambiar Contraseña 
      </asp:LinkButton> 
     </li> 

    </ul> 
    <br /> 
</div>

你有一个屏幕截图或链接？ – hunter 2010-11-23 19:20:42

我同意Chip Hunt，你需要'浮动：离开'li元素，或者让它们'显示：内联'或'显示：内联块'。但也删除了一些奇怪的CSS：'a：hover text-decoration：none;填充右：5像素;向左飘浮;'没有意义，因为他们已经在上面的课堂上了。 – Bazzz 2010-11-24 07:41:35

答

您希望您的li元素浮动，而不是a元素。

原件（实际工作作为Firefox和Chrome有望对我来说）：http://jsfiddle.net/56ESk/ 新：http://jsfiddle.net/56ESk/1/

你也不需要已经重复占声明您:hover

div.Toolbar 
{ 
    padding: 4px; 
} 

div.Toolbar ul 
{ 
    list-style: none; 
    margin: 0px; 
    padding: 0px 10px 0px 0px; 
    width: 100%; 
} 

div.Toolbar ul li 
{ 
    display: block; 
    float: left; 
} 

div.Toolbar ul li a, div.leftMenu ul li a:visited 
{ 
    border: 1px solid #f0f5f8; 
    display: block; 
    line-height: 1.35em; 
    padding: 5px 5px; 
    text-decoration: none; 
    white-space: nowrap; 
    /* float: left; */ 
} 

div.Toolbar ul li a:hover 
{ 
    background-color: #FFFF99; 
    border: 1px solid #FFCC00; 
}

答

div.Toolbar ul li 
{ 
list-style-type: none; 
display: inline; 
}

CSS水平列表不显示在Chrome浏览器中的水平在Firefox浏览器上显示为水平

相关推荐