2010-11-23 22 views
0

こんにちは、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> 
+0

に宣言のために行う占めスクリーンショットやリンクがありますか? – hunter

+0

私はチップハントに同意します。li要素を「浮動小数点にする」か、「表示:インライン」または「表示:インラインブロック」にする必要があります。しかし、またいくつかの奇妙なCSSを削除します: ':ホバーテキストの装飾:なし;パディング - 右:5ピクセル; float:left; '彼らはすでにそれの上のクラスに既にあるので、意味をなさない。 – Bazzz

答えて

1

あなたの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; 
} 
2
div.Toolbar ul li 
{ 
list-style-type: none; 
display: inline; 
} 
+0

これもうまくいきますが、N.B.インラインの書式設定は一般的に制限があります(垂直マージンやパディングを追加するのは難しい)。ブロック要素でインライン要素を配置することで速度を上げる必要があります。これは現在心配しているものではありません。 –

関連する問題