使用CSS的两个UL部件中的导航栏

刚刚开始学习CSS并面临一个问题。使用CSS的两个UL部件中的导航栏

我的问题是，我尝试在主页顶部制作一个导航栏，下面有一张图片，导航栏由2个UL部分组成，一个在左侧，另一个在右侧。问题是图片和文本（H1-header）从一个错误的地方开始，当它们应该（或者Im试图在这里实现的内容）从名为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/

任何建议，我怎么能做到这一点还是我怎么会做这项工作？谢谢！

来源

2014-09-19 Papu

既然你正在学习，我建议你试着让自己养成在你的ID和课程中遵循最佳实践的习惯。 '.row'是非常通用的，即使对于一个类，导航栏也应该有一个id，因为它是页面上的一个主要和唯一元素（通常），而'＃left'和'＃right'可以很容易地重用并应该是类（甚至''.float-left'可能会更好）。 – KRyan 2014-09-19 03:43:09

添加到您的CSS：

.row{ display:block; height:20px; }

你row类没有属性，如高度，间距等。

所以，当一个元素出现时，它只是把它扔了wheverever它能够！ :)

我不知道如果你想在图像上的文字，但如果没有，你将需要从picture类作用域采取该HTML元素。

来源

2014-09-19 00:19:07 Pogrindis

完全没有问题，好问的问题很容易出错！与CSS学习祝你好运！ – Pogrindis 2014-09-19 00:22:06

本身并没有错，但是''display：block'到'.row'在这里是多余的，因为它是'div'，默认情况下这些都是块元素。如果行类重复使用某些不是的元素，这可能会导致意外或混乱的行为（假设非块元素是故意选择的非块状态） – KRyan 2014-09-19 03:37:05

使用CSS的两个UL部件中的导航栏

回答

相关问题