1

すべてのli要素を次のように表示したい

ul

li1 li2 li3 ...（画面の幅まで）

... li（n-1）lin

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クラスとゴールデンを削除します

編集：display：inline-block; フロートの代わりにも機能します

于 2013-02-23T15:57:03.717 に答える