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

让你的<li>-s 内联 - 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>

演示

Answer 2

li {
    float: left
}

需要浮动你的 li。

或者你可以display: inline-block;在你的 li上使用在 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 中不起作用的人。如果你知道你在做什么，它就可以。