Question

您好我正在尝试使用ul和li元素创建一个工具栏，一切都在IE8上运行良好但是当我在google chrome o firefox中渲染页面时，elementos不会以水平方式显示。这是我用于工具栏的CSS。

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>

Answer 1

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

Answer 2

您希望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;
}

CSS水平列表未在firefox上显示水平在chrome上

2 个答案: