Question

我正在努力更好地理解CSS显示内联与阻止。

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

我有一个块列表，并显示它们的样式：内联。他们为什么不内联？

然后我尝试了内联块，它运行了。阅读内联块的描述，我不希望它工作。我是否正确使用

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

由于

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

Answer 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;
}

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

Answer 2

您还需要制作<div> - 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;
}

样式列表内联vs内联块

2 个答案: