HTML5 - 並列顯示項目

我是HTML/CSS新手，所以我創建了一個簡單的網站來了解它是如何工作的。HTML5 - 並列顯示項目

我有一個包含網站名稱和鏈接集合的標題。我想格式化它們，以便它們並排。（類似於StackExchange，如上所示。左側的網站名稱，右側的鏈接）。

我已經包含了我目前的標記，但它似乎沒有做任何事情。我懷疑我不正確地使用CSS類和子類，或者我有錯誤的概念。有人能指出我可能提出的任何錯誤，或指出我有資源作進一步參考嗎？任何幫助，將不勝感激。謝謝！

編輯：我想要網站名稱上面的口號，右側和左側的鏈接。

CSS

header 
{ 
    clear:both; 
} 

header .section 
{ 
    float:left; 
} 

header .nav 
{ 
    float:right; 
}

HTML

<header> 
     <section> 
      <h1>My Website</h1> 
      <p>My Slogan</p> 
     </section> 
     <nav> 
      <a href="#">Link A</a> | 
      <a href="#">Link B</a> 
     </nav> 
</header> 
<article> 
    My website contents 
</artcile>

回答

有多個正確答案，但我可以可惜只標註一個是正確的。正確的答案是刪除「.section」和「.nav」中的圓點，並設置標題溢出：auto而不是clear：兩者。感謝大家！

來源

2013-09-23 Dragonseer

例如，您將使用'header'而不是'.header'。點意味着它是具有該類名稱的元素。如果沒有點，它會選擇帶有* tag *名稱的元素。 –

謝謝韋斯利。我更新了我的代碼並從CSS中刪除了這些點。這似乎已經完成了這個伎倆，但現在我的文章正在被並排格式化。 – Dragonseer

@Dragonseer你需要刪除其他標籤名稱前面的點（'section'，'nav'）在你的css中 – tomaroo

你想是這樣的，對不對？

header { 
    overflow:auto; 
} 

header section { 
    float:left; 
} 
header nav { 
    float:right; /* or left */ 
}

jsFiddle here

正如在評論中提到，您使用header，而不是.header，section相的nav代替.nav到.section。

.用於引用類。

overflow:auto將使父項包含子項，因爲未設置高度。

來源

2013-09-23 18:53:33

這似乎已經完成了這個訣竅。我有點困惑，但是因爲我的網絡搜索顯示每個人都使用clear：both，而不是overflow：auto。 – Dragonseer

Josh - 明確：兩者對我來說似乎都不起作用，但溢出：汽車效果很好。 – Dragonseer

@Dragonseer很高興幫助！如果您有任何問題，請告訴我！ –

一個簡單的方法是添加此規則：

nav { 
    float:right; 
} 
section { 
    float:left; 
} 
section h1 { 
    margin:0; 
} 
article { 
    clear:both; 
}

jsFiddle example

這使得標題顯示內嵌內的所有元素，並並排顯示。

來源

2013-09-23 18:46:49 j08691

他要去*「網站名稱在左邊，鏈接到右邊」* –

我應該澄清一下：我想要站在口號上方的網站名稱，右側的鏈接和左側的鏈接。 – Dragonseer

Oooooh，完全誤讀了。等等，是左邊還是右邊的鏈接？ – j08691

這裏有一個FIDDLE

header { 
    height: 50px; 
} 
header section { 
    float:left; 
} 
header nav { 
    float:right; 
}

來源

2013-09-23 18:52:33 mdesdev

謝謝mdesdev。這似乎已經完成了格式化東西。然而，現在我的文章和我的Lipsum文本也被格式化，並被拉到我的網站名稱和口號旁邊。 – Dragonseer

不客氣。 – mdesdev

HTML5 - 並列顯示項目

回答

相關問題