將h1與導航欄對齊

服務器端開發人員在這裏嘗試自學一些樣式。將h1與導航欄對齊

我試圖從this site複製標題部分（id=topbar）。我最初的努力未能使h1（scott hanselman）與導航列表項（關於博客等）保持一致 - 我主要嘗試使用float: left和display: inline來克服h1的塊性質 - 我失敗了！

在Chrome開發工具中使用CSS時，我還沒有理解他如何在containerInner中很好地對齊這些項目。當我切換繼承的margin屬性（css的第4-9行）時，我發現導航條目低於h1，正如我所預期的那樣是一個塊元素。

我的問題是，是什麼使h1不佔用所有可用的水平空間？看起來像我的float和display屬性錯過了商標的猜測。

這是我迄今所作的努力： HTML

<!doctype html> 
<head> 
    <meta charset="utf-8"> 
    <title>first last</title> 
    <link rel="stylesheet" href="blog_style.css" type="text/css" /> 
</head> 

<body> 
    <div class="container"> 
     <div class="top-ribbon-outer"> 
      <div class="top-ribbon-inner"> 
       <h1>first last</h1> 
       <nav> 
        <ul> 
         <li>item1</li> 
         <li>item2</li> 
         <li>item3</li> 
         <li>item4</li> 
        </ul> 
       </nav> 
      </div> 
     </div> 
    </div> 
</body> 

</html>

CSS：

body { 
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-size: 15px; 
    margin-left: 50px; 
} 

.top-ribbon-outer { 
    width: 100%; 
    height: 50px; 
    color: white; 
    background-color: black; 
    position: relative; 
} 

.top-ribbon-inner { 
    height: 20px; 
} 

h1 { 
    margin-bottom: 0px; 
    margin-top: 0px; 
    float: left; 
    /*display: inline;*/ 
} 

li { 
    float: left; 
    padding-left: 15px; 
    padding-right: 15px; 
} 

ul { 
    list-style-type: none; 
}

來源

2013-07-20 markdsievers

你有沒有這個生活的地方？ –

@NikolaR。不，只是在本地開發。將html保存爲一個文件，將css保存爲'blog_style.css'並放在同一目錄中，並且應該適合您。 – markdsievers

更新了我的答案，帶上CSS，你可以使用字體大小。 –

您需要使用display:inline-block爲ul和h1頭。因此，嘗試這種

h1 { 
    margin-left: 10px; 
    margin-top: 10px; 
    float: left; 
    display: inline-block; 
} 

ul { 
    list-style-type: none; 
    display:inline-block; 
    float:right; 
}

JsFiddle

來源

2013-07-20 09:54:29 Sachin

嗨，感謝您的解決方案，看起來不錯！您是否能夠確定在參考網站上它是如何實現的？想在我的理解上填補空白。 – markdsievers

@markdsievers在被引用的網站上，他們也使用了相同的概念，例如在左邊的浮動'h1'和用於'rig'的'nav'並使用了'dispaly：block' – Sachin

您是對的，謝謝！ – markdsievers

無需設置家長的高度。只要使用overflow: hidden，它會正確地覆蓋它的流動兒童

CSS：

body { 
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-size: 15px; 
    margin-left: 50px; 
} 

.top-ribbon-outer { 
    width: 100%; 
    color: white; 
    background-color: black; 
    position: relative; 
} 

.top-ribbon-inner { 
    overflow: hidden; 
} 

h1 { 
    margin: 0; 
    float: left; 
    padding: 5px; 
} 
nav { 
float: right; 
} 

li { 
    float: left; 
    padding-left: 15px; 
    padding-right: 15px; 
} 

ul { 
    list-style-type: none; 
}

Demo

來源

2013-07-20 09:54:06

將h1與導航欄對齊

回答

相關問題