快速的html標記問題

-2

我想爲我的頁面做一個快速標記。快速的html標記問題

我想讓我的標題顯示在我的<nav>標記的下一行，而不是緊挨着它。我該怎麼做？

HTML：

<nav> 
    <ui> 
     <li>item1</li> 
     <li>item2</li> 
     <li>item3</li> 
    </ui> 
</nav> 

<section id='title'> 
    <div>title 1</div> 
    <div>texts here....</div> 
</section>

CSS：

nav { 
    background-color: black; 
    text-align: center; 
} 
nav ui li{ 
    list-style: none; 
    font:bold .6em arial; 
    float: left; 
    margin: .3em; 
    padding: 1.3em; 
    background-color: #A8A8A8; 
}

這裏的標題和文本...緊挨着我的菜單，但我希望他們在菜單下。我該怎麼做呢？

來源

2013-08-16 FlyingCat

它的'

' – TecHunter

問這樣的問題時，您應該上傳你的代碼http://www.jsfiddle.net ......

總之，有幾個備選方案。

例如：給導航或#title部分，clear: both屬性：

#title { 
    clear: both; 
}

對於它的學者，像其他人說，這個頁面上，如果有其他浮動元素向右在#title部分的，下面的代碼會更適合：

#title { 
    clear: left; 
}

來源

2013-08-16 05:57:36 Itay

+1的原因有很多，我正要說的一樣....這裏是我的小提琴http://jsfiddle.net/k6SUE/5/ – TecHunter

但它不會如果我們希望另一個對象漂移到標題的右側，這會有所幫助。請參閱下面的評論@Optimus Prime。 –

@DivyaBhalodiya：已修復。感謝你和擎天柱 – Itay

一種方法是添加：

width:100%; 
float:left;

導航的CSS。

由於導航寬度會默認爲一些較小的寬度（不佔用包含div的整個寬度），因此section標記沒有理由放在nav下面。這允許節標籤容易地沿着導航標籤的內容向左浮動。

來源

2013-08-16 05:58:09

使用明確的B/W都和

<nav> 
    <ul> 
     <li>item1</li> 
     <li>item2</li> 
     <li>item3</li> 
    </ul> 
</nav> 



<section id='title'> 
     <div>title 1</div> 
     <div>texts here....</div> 
    </section>

添加到CSS #title {clear:both;}

http://jsfiddle.net/2Fgdw/

來源

2013-08-16 05:59:03

你不需要額外的'div'這個目標。 – Itay

然後像#title {clear：both;} –

首先，請您ui標籤更改爲ul。

HTML中的無序列表應該像<ul><li></li></ul>。

剛剛添加到CSS，

section{ 
    clear : left; 
}

或者如果你有多個部分，

#title{ 
    clear : left; 
}

clear:both不應該使用，如果您有其他漂浮物所有權的權利。然後改變寬度到100％也不會對你有好處。

JSFIDDLE DEMO

來源

2013-08-16 06:02:21

+1加上css來解答。我們也可以使用這個#title {clear：both;} –

@DivyaBhalodiya當然在這種情況下，但如果我們希望另一個對象被浮動到標題的右側，它將不會有幫助。 –

擎天柱指出，這是什麼在你的CSS的ui應該是ul - 無論<nav>和<section>是塊級元素和自然會100％的寬度，並迫使旁邊下降到下一行。

來源

2013-08-16 06:20:02 sheriffderek

我不打算髮布代碼，但如果你想看看我會如何去做這件事 - 我做了所有評論的小提琴。 http://jsfiddle.net/sheriffderek/KuHhf/祝你好運！ – sheriffderek

快速的html標記問題

回答

相關問題