Question

我正在尝试制作一个水平列表，其中列表中的每个<li>的高度为385px，宽度为400px。

我尝试使用内联块使列表水平，但这似乎不起作用。通过它，我的意思是列表仍然是垂直的。 <li>的大小合适，但列表不是水平的。

如何将此列表设为水平？（最好没有flexbox）

这是我的CSS：

html, body{
    margin:0;
    padding:0;
    font-family:'Open Sans', sans-serif;
    font-size:16px;
}
#slides{
    list-style:none;
    list-style-type:none;
}
#slides li{
    height:385px;
    width:400px;
    display:inline-block;
}

和我的HTML：

<form action="" method="get">
    <fieldset>
        <ul id="slides">
            <div id="first">
            <li>
               1
            </li>
        </div>
        <div id="second">
            <li>
                2
            </li>
        </div>
        <div id="last">
            <li>
            3
            </li>
        </div>
        </ul>
</fieldset>
</form>

Answer 1

你完全错了，你正在使用块级元素div，你也不能在li内使用除ul之外的任何其他元素，所以你的标记无效，而是像这样做

<ul>
   <li><div>A</div></li>
   <li><div>B</div></li>
</ul>

<style>
ul li {
   display: inline-block;
}
</style>

Answer 2

添加一个浮动：左边的#slides li

#slides li{float:left;}

希望这有帮助。

Answer 3

删除div并将li向左浮动：

HTML

<form action="" method="get">
    <fieldset>
        <ul id="slides">
            <li id="first">1</li>
            <li id="second">2</li>
            <li id="third">3</li>
        </ul>
</fieldset>
</form>

CSS

html, body{
    margin:0;
    padding:0;
    font-family:'Open Sans', sans-serif;
    font-size:16px;
}
#slides{
    list-style:none;
    list-style-type:none;
}
#slides li{
    height:385px;
    width:40px;
    display:inline-block;
    float: left;
}

http://jsfiddle.net/X6LkZ/1/

水平列表不是内联/一行

3 个答案: