Question

我有一个无序列表，我已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:left

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

Answer 1

我已经在所有浏览器上测试了它，这是有效的。无论如何，如果您遇到此问题，请将display: inline-block;添加到您的父元素。

Answer 2

这应该有用。

我怀疑你有另一个课程已经过度消除，或者你没有引用所需的课程（拼写错误）。

或者，错误是浏览器设置？检查它是否在所有浏览器中都失败。

Answer 3

我用ul测试了你的css并且工作正常（

元素显示为水平）。

也许你还有其他规则会覆盖这个规则，所以请尝试使用！important如下：

display:inline !important;

Answer 4

在铬中看起来都很好

Olivera Kovacevic指出了很好的快速决定可以解决你的问题，但是后来你可能会遇到很多问题。

尝试实施this style of ccssing

Answer 5

#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>

Answer 6

我怀疑您white-space:nowrap

需要ul

ul { white-space:nowrap;}

Answer 7

您的代码存在的问题是div元素仍然是块元素。这就是他们没有水平订购的原因。你需要将它们设置为inline-block（如果你想为它们设置例如高度或填充），否则你可以为它们设置一个简单的inline。

min-height的{{1}}和width对li没有任何影响，因为如果你想将li定义为inline li您还应将inline-block规则应用于li

<强> 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>

display：内联属性不起作用

7 个答案: