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>

來源

2010-11-23 Jean Jimenez

你有一個屏幕截圖或鏈接？ – 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; 
}

來源

2010-11-23 19:31:49

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

來源

2010-11-23 19:30:53

CSS水平列表不顯示在Chrome瀏覽器中的水平在Firefox瀏覽器上顯示爲水平

回答

相關問題