Question

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

UL

li1 li2 li3 ...（高达屏幕宽度）

... li（n-1）lin

UL

即水平而不是垂直显示。我在SO上看到了很多与之相关的问题，但不知何故，即使尝试了很多东西，我也无法为我的html＆amp; 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;
}

Answer 1

<div>内不能有<ul>。 The content model for <ul> is actually that specific

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

http://jsfiddle.net/vaQma/

Answer 2

使用li包裹div无效。您只需要将display:inline-block提供给li元素。

Answer 3

你是怎么做的：

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

.iconlist li{
float:left;
}

删除div和.inline类以及您的黄金

编辑：display：inline-block;也适用于浮动

强制所有<li>元素在一行中水平显示</li>

3 个答案: