水平显示无序列表[关闭]答案

【问题标题】：Displaying a unordered list horizontally [closed]水平显示无序列表[关闭]
【发布时间】：2014-10-16 04:28:54
【问题描述】：

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

这方面的任何帮助都会很棒

【问题讨论】：

CSS Horizontal list items的可能重复

标签： html css image html-lists

【解决方案1】：

将浮动设置到左侧将使列表水平

li {
    float: left;
}

【讨论】：

【解决方案2】：

添加以下 CSS。

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

DEMO

【讨论】：

【解决方案3】：

试试这个

FIDDLE DEMO

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

【讨论】：

【解决方案4】：

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

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

但谷歌更快

【讨论】：

【解决方案5】：

CSS 怎么样：

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

li {
  display: inline;
}

【讨论】：