Css 样式列表内联与内联块_Css

Css 样式列表内联与内联块

css

Css 样式列表内联与内联块,css,Css,我试图更好地理解CSS显示内联与块我有以下代码（现场演示在）我有一个块列表，并设置它们的样式显示：inline。为什么它们不在线然后我尝试了内联块，它成功了。阅读内联块的描述，我不希望它能工作。我用对了吗然后我尝试了最后的列表，几乎得到了我想要的外观。我想要一行，但是在每次“你好”之后，我想要显示背景图像。你能帮忙吗谢谢 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html>

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

我有以下代码（现场演示在）

我有一个块列表，并设置它们的样式显示：inline。为什么它们不在线

然后我尝试了内联块，它成功了。阅读内联块的描述，我不希望它能工作。我用对了吗

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

谢谢

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


无标题
.main ul bad>li{
列表样式类型：无；
显示：内联
}
.main ul>li{
列表样式类型：无；
显示：内联块
}
第1分部{
显示：内联块
}
.main ul>li div ul{
显示：无；
}
背景{
背景图片：url（“dropdown_arrow_blue.gif”）；
背景重复：无重复；
}

你好
你好
你好


你好
你好
你好



标签
你好

你好
你好
你好



标签
你好

你好
你好
你好



标签
你好

你好
你好
你好

您的第一个列表

main ul bad

不会内联显示，因为每个列表项中都有一个

div

，默认情况下是一个块。如果删除div或使其

内联

，它们将显示在一行上

虽然我相信更常见，也可能更合适的方法是浮动横向列表：

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

为列表指定一个宽度，该宽度可容纳一行中所需的项目数，并浮动项目。

您还必须使

-s

内联块

，而不仅仅是

-s-

然后，您可以在每个图像之后添加图像：

.main ul bad>li{
列表样式类型：无；
显示：内联；
}
.主ul bad>李分区{
显示：内联块；
右边距：30px；
位置：相对位置；
}
.主ul bad>li div:之后{
内容：网址(http://lorempixel.com/20/20);
高度：20px；
宽度：20px；
显示：块；
位置：绝对位置；
排名：0；
右：-20px；
}

谢谢佐尔坦。为什么要使用位置？只是为了能够将图像放在任何你想要的地方。。一个没有定位的例子——我看到显示不是继承的，所以这是有意义的。但是看起来我仍然会有一个水平的

列表，但是每个列表中都有垂直div。不确定你所说的垂直div是什么意思？我希望

元素是内联的，并在屏幕上水平移动，但是在每个列表中，元素（如果有多个）将位于彼此的顶部，因为它们是块。哦，是的，那是因为

中的
。。。li>div

选择器仅选择直接子级。如果存在嵌套的div，则不会选择它们。如果删除

，它将影响所有子div。我更新了我的JSFIDLE链接以向您展示。

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

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