0

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

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

我怎样才能使这个列表水平？（最好没有弹性盒）

这是我的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>
4

3 回答 3

4

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

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

<style>
ul li {
   display: inline-block;
}
</style>
于 2013-05-07T11:12:42.050 回答
1

添加一个 float:left 到#slides li

#slides li{float:left;}

希望这可以帮助。

于 2013-05-07T11:12:11.383 回答
0

删除divs 并将 s 浮动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/

于 2013-05-07T11:17:52.323 回答