css - このリストを水平方向にレンダリングするにはどうすればよいですか?

Question

次の ul タイプ リストがあり、水平方向に表示する必要がありますが、そうではありません。私は何が欠けていますか？

<ul style="display: inline;">
    <li>
        <div class="store-display-item" style="display: inline;">
            <img class="store-display-image" src="/Images/ToughBook.jpg">
        </div>
    </li>
    <li>
        <div class="store-display-item" style="display: inline-block;">
            <img class="store-display-image" src="/Images/ToughBook.jpg">
        </div>
    </li>
</ul>

Answer 1

-sを<li>インラインにする-デモ

<ul>
    <li style="display: inline;">
        <div class="store-display-item" style="display: inline;">
            <img class="store-display-image" src="/Images/ToughBook.jpg">
        </div>
    </li>
    <li style="display: inline;">
        <div class="store-display-item" style="display: inline-block;">
            <img class="store-display-image" src="/Images/ToughBook.jpg">
        </div>
    </li>
</ul>

---

コードをよりクリーンにするための2つのこと：

1. <div>内部は不要に見え<li>ます-<li>コンテナのように動作するようにスタイルを設定できます
2. インラインCSSを使用しないでください

例

<style>
li { display: inline; }
</style>

<ul>
    <li><img class="store-display-image" src="/Images/ToughBook.jpg"></li>
    <li><img class="store-display-image" src="/Images/ToughBook.jpg"></li>
</ul>

デモ

Answer 2

li {
    float: left
}

あなたの李を浮かせる必要があります。

または、IE7以前では動作しないdisplay: inline-block;liで使用できます

li {
    display: inline-block;
}

Answer 3

使用できますdisplay: inline-block;。

ul {font-size: 0;}
li {display: inline-block; vertical-align: top; *display: block; zoom: 1;}

display: inline-block;IE7 では動作しないという人の言うことを聞かないでください。あなたが何をしているのかを知っていれば、それはそうです。