如何让此列表水平渲染？

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

让您的<li> - 内联 - DEMO

<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>

---

使代码更清洁的两件事：

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>

DEMO

Answer 2

li {
    float: left
}

需要漂浮你的李。

或者您可以在li 上使用display: inline-block;在IE7及更早版本中无法使用

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中不起作用的人。如果你知道你在做什么，它就会发生。