样式列表内联与内联块答案

【问题标题】：Styling lists inline versus inline-block样式列表内联与内联块
【发布时间】：2012-10-31 16:43:03
【问题描述】：

我试图更好地理解 CSS 显示内联与块。

我有以下代码（http://jsfiddle.net/BfZEv/1/ 的现场演示）

我有一个块列表，并将它们设置为 display:inline。为什么它们不内联？

然后我尝试了 inline-block，它成功了。阅读内联块的描述，我没想到它会起作用。我用对了吗

然后我尝试了最终列表，几乎得到了我想要的外观。我想要一行，但在每个“你好”之后，我想显示背景图像。你能帮忙吗？

谢谢

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>
        <title>Untitled</title>
        <style type="text/css">
            .main-ul-bad > li {
                list-style-type: none;
                display:inline
            }
            .main-ul > li {
                list-style-type: none;
                display:inline-block
            }
            div.div1 {
                display:inline-block
            }
            .main-ul > li div ul {
                display: none;
            }
            span.background {
                background-image: url("dropdown_arrow_blue.gif");
                background-repeat: no-repeat;
            }
        </style>
    </head>
    <body>
        <ul class="main-ul-bad">
            <li><div>Hello</div></li>
            <li><div>Hello</div></li>
            <li><div>Hello</div></li>
        </ul>

        <ul class="main-ul">
            <li><div>Hello</div></li>
            <li><div>Hello</div></li>
            <li><div>Hello</div></li>
        </ul>

        <ul class="main-ul">
            <li>
                <span>Label</span>
                <div class="div1">
                    <div class="div2"><span class="text">Hello</span><span class="background"></span></div>
                    <ul>
                        <li>Hello</li>
                        <li>Hello</li>
                        <li>Hello</li>
                    </ul>
                </div>
            </li>
            <li>
                <span>Label</span>
                <div class="div1">
                    <div class="div2"><span class="text">Hello</span><span class="background"></span></div>
                    <ul>
                        <li>Hello</li>
                        <li>Hello</li>
                        <li>Hello</li>
                    </ul>
                </div>
            </li>
            <li>
                <span>Label</span>
                <div class="div1">
                    <div class="div2"><span class="text">Hello</span><span class="background"></span></div>
                    <ul>
                        <li>Hello</li>
                        <li>Hello</li>
                        <li>Hello</li>
                    </ul>
                </div>
            </li>
        </ul>
    </body>
</html>

【问题讨论】：

标签： css

【解决方案1】：

你也必须让你的<div>-s inline-block，而不仅仅是<li>-s - DEMO

然后你可以在每张图片之后添加图片：

.main-ul-bad > li {
    list-style-type: none;
    display: inline;
}

.main-ul-bad > li div {
    display: inline-block;
    margin-right: 30px;
    position: relative;
}

.main-ul-bad > li div:after {
    content: url(http://lorempixel.com/20/20);
    height: 20px;
    width: 20px;
    display: block;
    position: absolute;
    top: 0;
    right: -20px;
}

【讨论】：

谢谢佐尔坦。为什么要使用位置？
只是为了能够将图像放在您想要的任何位置。没有定位的示例 - jsfiddle.net/BfZEv/5

【解决方案2】：

您的第一个列表main-ul-bad 不会内联显示，因为您在每个列表项中都有一个div，默认情况下这是一个块。如果您删除 div 或将它们设为 inline，它们将显示在一行上。

http://jsfiddle.net/BfZEv/6/

虽然我认为更常见，也可能是正确的水平列表方法是浮动它们：

<ul class="main-ul-bad">
    <li><div>Hello</div></li>
    <li><div>Hello</div></li>
    <li><div>Hello</div></li>
</ul>

css:

.main-ul-bad {
    width: 500px;
}

.main-ul-bad > li {
    list-style-type: none;
    float: left;
    margin: 5px;
}

为列表指定一个宽度，以容纳您想要在一行中的项目数并浮动项目。

【讨论】：

我看到 display 不是继承的，所以这是有道理的。但似乎我仍然会有一个
的水平列表，但每个中都有垂直 div。

不确定垂直 div 是什么意思？

我希望

元素是内联的并在屏幕上水平移动，但在每个元素中，

元素（如果有多个）将彼此重叠因为它们是阻塞的。

哦，是的，那是因为... li > div 选择器中的> 只选择直接子代。如果有嵌套的 div，它们将不会被选中。如果您删除 >，它将影响所有子 div。我更新了我的 jsfiddle 链接以显示给你。