1

我有一个无序列表，可以在其中水平display:inline查看li列表，但无法水平查看。这是我的代码：

ul li{
min-height:310px;
background:#FFF;
width:330px;
display:inline;
margin-left:15px;
}
<ul>
    <li><div>Something</div></li>
    <li><div>Something</div></li>
    <li><div>Something</div></li>
    <li><div>Something</div></li>
</ul>

注意：我不应该使用float:leftor float:right。所以我更喜欢显示属性。

4

7 回答 7

1

我已经在所有浏览器上对其进行了测试，并且可以正常工作。无论如何，如果您遇到此问题，请添加display: inline-block;到您的父元素。

于 2013-03-20T13:41:56.163 回答
0

这应该有效。

我怀疑你有另一个类是过度的，或者你没有引用所需的类（错字）。

或者，问题出在浏览器设置上？检查它是否在所有浏览器中都失败。

于 2013-03-20T12:07:07.323 回答
0

我用 ul 测试了你的 css，它工作正常（

  • 元素水平显示）。

    也许您有其他规则覆盖了这条规则，因此请尝试使用 !important ：

    display:inline !important;
    • 于 2013-03-20T12:12:03.220 回答
    0

    在铬中，一切看起来都很好

    Olivera Kovacevic 指出了很好的快速决策可以解决您的问题，但稍后您可能会遇到很多此类风格的问题。

    尝试实现这种风格的ccssing

    于 2013-03-20T12:21:15.157 回答
    0 
    #navcontainer ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
}

#navcontainer ul li {
    display: inline;
}

#navcontainer ul li a {
    text-decoration: none;
    padding: .2em 1em;
    color: #fff;
    background-color: #036;
}

#navcontainer ul li a:hover {
    color: #fff;
    background-color: #369;
}

<link rel="stylesheet" type="text/css" href="css/firstcss.css" />
<div id="navcontainer">
            <ul>    
                <li>
                    <a href="#">Milk</a>
                </li>
                <li>
                    <a href="#">Eggs</a>
                </li>
                <li>
                    <a href="#">Cheese</a>
                </li>
                <li>
                    <a href="#">Vegetables</a>
                </li>
                <li>
                    <a href="#">Fruit</a>
                </li>
            </ul>
        </div>
    于 2013-03-20T12:58:29.100 回答
    0

    我怀疑你需要white-space:nowrap在你的ul

    ul { white-space:nowrap;}

    于 2013-03-20T13:02:19.270 回答
    0

    您的代码的问题是div元素仍然是块元素。这就是为什么它们不是水平排列的原因。您需要将它们设置为inline-block（如果您希望能够为它们设置例如高度或填充），否则您可以为它们设置一个简单inline的。

    并且 对于您没有任何效果，因为您定义了min-height好像您想将其用于您还应该将规则应用于widthliliinlineliinline-blockli

    css

    ul li{
    min-height:310px;
    background:#FFF;
    width:330px;
    display:inline;
    margin-left:15px;
}

//cross browser inline-block (the order in this rule is important so that it will work cross browser)
li div {
    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: middle;
    *vertical-align: auto;
    zoom: 1;
    *display: inline;
}

    html

    <ul>
    <li><div>Something</div></li>
    <li><div>Something</div></li>
    <li><div>Something</div></li>
    <li><div>Something</div></li>
</ul>
    于 2013-03-20T13:37:15.460 回答