css - 带有 CSS 的两个 UL- 部分的导航栏

Question

刚开始学习 CSS，遇到了一个问题。

我的问题是我尝试在主页顶部制作一个导航栏，下面有一张图片，导航栏由 2 个 UL 部分组成，一个在左侧，第二个在右侧。问题是图片和文本(H1- 标题)从错误的位置开始，而它们(或我在这里试图实现的目标)应该从名为 DIV 元素的“行”的末尾开始。

HTML 一:

<div class="row">
    <ul id="left">
      <li>1</li>
      <li>2</li>
       <li>3</li>
       <li>4</li>
       <li>5</li>
   </ul>

   <ul id="right">
      <li>3</li>
      <li>4</li>
   </ul>
</div>

<div class="picture">
    <h1>This header is going in wrong place.</h1>
    <p>This is where the text comes.</p>
</div>

CSS 一:

.row ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: inline-block;
}

.row li {
    display: inline
}

.row #left {
    float: left;
}

.row #right {
    float: right;
}

.picture {
      background-image:url('http://goo.gl/04j7Nn');
    height: 400px;
}

这是一个链接:http://jsfiddle.net/yw8uZ/109/

有什么建议可以让我如何做到这一点或如何使这项工作发挥作用？谢谢!

Answer 1

将此添加到您的 CSS 中:

.行{
显示: block ；
高度:20px；
}

您的 row 类没有高度、间距等属性。

因此，当下一个元素出现时，它会尽可能地抛出它! :)

我不确定您是否希望在图像上显示文本，但如果不需要，您需要将该 HTML 元素从 picture 类范围中取出。