Question

我有一个无序的图像列表，我需要水平显示它们没有边距/填充或列表样式，我会用什么CSS来做这个？

这是我的HTML代码：

<div id="carouselContainer">
    <ul id="carousel-list">
        <li><a href="/"><img src="image.png" alt="Desc" /></a></li>
        <li><a href="/"><img src="image.png" alt="Desc" /></a></li>
        <li><a href="/"><img src="image.png" alt="Desc" /></a></li>
        <li><a href="/"><img src="image.png" alt="Desc" /></a></li>
    </ul>
</div>

对此有任何帮助都很棒

Answer 1

将浮动设置为左将使列表水平

li {
    float: left;
}

Answer 2

添加以下CSS。

 #carousel-list{padding:0;margin:0;}
 #carousel-list li{display:inline-block;}

DEMO

Answer 3

试试这个

<强> FIDDLE DEMO

#carousel-list {
    display: inline;
    list-style-type: none;
    padding:0;
    margin:0;
}

Answer 4

#carousel-list li
{
    display: inline-block;
}

#carousel-list
{
    list-style-type: none;
}

但谷歌更快

Answer 5

CSS怎么样：

ul, li {
  margin: 0;
  padding: 0;
  list-style:none;
}

li {
  display: inline;
}

水平显示无序列表

5 个答案: