水平显示无序列表

时间:2014-08-22 10:32:33

标签: html css image html-lists

我有一个无序的图像列表,我需要水平显示它们没有边距/填充或列表样式,我会用什么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>

对此有任何帮助都很棒

5 个答案:

答案 0 :(得分:3)

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

li {
    float: left;
}

答案 1 :(得分:2)

添加以下CSS。

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

DEMO

答案 2 :(得分:2)

试试这个

<强> FIDDLE DEMO

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

答案 3 :(得分:2)

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

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

但谷歌更快

答案 4 :(得分:1)

CSS怎么样:

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

li {
  display: inline;
}