1

我希望将我所有的 li 元素显示为

ul

li1 li2 li3...（直到屏幕的宽度）

...li(n-1) 林

ul

即水平而不是垂直显示它们。我在 SO 上看到了很多与它相关的问题，但不知何故，即使在尝试了很多事情之后，我也无法为我的 html 和 css 修复它。

我只是一个初学者，所以我可能犯了一个非常基本的错误。

 <ul class="iconlist">
                <div class="inline">
                    <li>
                        <a href="http://www.google.com" target="_blank"><img src="images/profile/0.png"</a>
                        <h3><a href="http://www.google.com" target="_blank">ABB</a></h3>
                    </li>
                    <li>
                        <a href="http://www.google.com" target="_blank"><img src="images/profile/14.png"</a>    
                        <h3><a href="http://www.google.com" target="_blank">Siemens</a></h3>
                    </li>
                    <li>
                        <a href="http://www.google.com" target="_blank"><img src="images/profile/0.png"</a>    
                        <h3><a href="http://www.google.com" target="_blank">Alstom</a></h3>
                    </li>
                    <li>
                        <a href="http://www.google.com" target="_blank"><img src="images/profile/14.png"</a>
                        <h3><a href="http://www.google.com" target="_blank">Linde</a></h3>                    
                    </li>
                </div>
            </ul>


.iconlist{
list-style:none;
text-align:center;
padding:20px 0px 20px 0px;
clear:none;
float:left;
}

.inline
{
display:inline;
clear:none;
float:left;
}
4

3 回答 3

4

你不能有<div>一个<ul>. 的内容模型<ul>实际上是特定的

无论如何，您想要.iconlist样式，但要将它们应用于<li>元素，而不是<ul>：

http://jsfiddle.net/vaQma/

于 2013-02-23T15:49:16.170 回答
1

换行li无效div。你只需要给display:inline-block元素li。

于 2013-02-23T15:49:53.780 回答
0

以下是您的操作方法：

.iconlist{
list-style:none;
text-align:center;
padding:20px 0px 20px 0px;
clear:none;
}

.iconlist li{
float:left;
}

删除 div 和 .inline 类和你的黄金

编辑：显示：内联块；也可以代替浮动

于 2013-02-23T15:57:03.717 回答