css - 水平列表不内联/一行

Question

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

我尝试使用 inline-block 使列表水平排列，但这似乎不起作用。也就是说，我的意思是列表仍然是垂直的。 <li> s 大小合适，但列表不是水平的。

如何让这个列表水平排列？ (最好没有 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这是 block 级元素，你也不能使用除 li 之外的任何其他元素里面ul ，所以你的标记无效，而是这样做

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

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