html - ul 的显示：inline-block 不工作和其他错误

Question

我有这个 html 代码：

<header>
    <a href="index.html">Mira's place</a><br>
    <h2>&#8220;<span id="quote">If nothing, then this.</span>&#8221;</h2>
        <ul>
            <li><a href="#">Home</a>
            <li><a href="#">Games</a>
            <li><a href="#">Pixel Art</a>
            <li><a href="#">Contact</a>
        </ul>
</header>

这个CSS

::selection {
    background: #D7DD22;
    }
::-moz-selection {
    background: #D7DD22;
}
html {
    background-color: #002240;
    font-family: "Geo", sans-serif;
    margin: 0;
}
header {
    background-color: #001629;
    margin: 0 -10px 0 -10px;
}
header a:first-child {
    color: #FF628C;
    font-size: 56px;
}
header h2 {
    color: #80FFBB;
}
ul {
    padding: 5px;
    background-color: #eee;
    display: inline-block;
}
p {
    color: white;
}

这是我的 jsfiddle http://jsfiddle.net/Xd7WF/1/。

我不明白为什么，但我display: inline-block的ul. 它不像预期的那样彼此相邻。我first-child的也不工作。它会影响其他a人的。谁能帮我？

Answer 1

您需要inline-block;在<li>元素上使用 display 代替

http://jsfiddle.net/Xd7WF/2/

Answer 2

您希望<li>元素内联，而不是<ul>. 因此，您将该值设置为<li>元素。

li {
    display: inline-block;
}