0

我试图更好地理解 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>
4

2 回答 2

1

您的第一个列表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;
}

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

于 2012-10-31T16:53:55.180 回答
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;
}
于 2012-10-31T16:54:11.920 回答