こんにちは、ulとliの要素を使ってツールバーを作成しようとしていますが、IE8ではうまくいきますが、Google Chromeでページを表示すると、水平方向。ここで私はツールバーに使用しているCSSです。水平のFirefoxのリストが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
私はチップハントに同意します。li要素を「浮動小数点にする」か、「表示:インライン」または「表示:インラインブロック」にする必要があります。しかし、またいくつかの奇妙なCSSを削除します: ':ホバーテキストの装飾:なし;パディング - 右:5ピクセル; float:left; '彼らはすでにそれの上のクラスに既にあるので、意味をなさない。 – Bazzz