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>

使代码更清洁的两件事：

<div>中的<li>看起来不必要 - 您可以将<li>设置为像容器一样
不使用内联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中不起作用的人。如果你知道你在做什么，它就会发生。

如何让此列表水平渲染？

3 个答案: