標題和導航列表的CSS問題 - 不對齊

這是我第一次使用stackoverflow和第一次嘗試在開發一個網頁請不要私聊我。我是一位貿易網絡工程師，在一些編碼方面嘗試我的手。標題和導航列表的CSS問題 - 不對齊

我正在嘗試構建基本組合頁面。標題，導航，圖像，內容和頁腳。沒什麼太花哨。我有一些問題讓我的標題與我的導航欄一致。在將標題文本「Terry」更改爲oleo字體之前，確實如此。如果將其保留爲默認值，則會與導航文本對齊。

我該如何解決這個問題，以便我的NAv顯示在我的頭文件中（看起來像是按下了它）？，我會不會更好並排有兩個div側，（正如我與左欄和右欄中直接做下面？有什麼事情做與使用花車？

任何意見將是巨大的！

html { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    height: inherit; 
 
} 
 

 
#container { 
 
    width: 100%; 
 
    height: inherit; 
 
    background-color: green; 
 
} 
 

 
#nav li { 
 
    float: right; 
 
    font-family: Courier; 
 
    padding: 15px; 
 
} 
 

 
.navli { 
 
    display: inline; 
 
    list-style-type: none; 
 
    font-family: "Brush Script MT", cursive; 
 
    font-size: 24px; 
 
    font-style: normal; 
 
    font-variant: normal; 
 
    font-weight: bold; 
 
    line-height: 26.4px; 
 
    text-decoration: none; 
 
} 
 

 
a { 
 
    text-decoration: none; 
 
} 
 

 
#banner {} 
 

 
#leftcolumn { 
 
    width: 40%; 
 
    background-color: yellow; 
 
    height: 75%; 
 
    float: left; 
 
} 
 

 
#rightcolumn { 
 
    width: 60%; 
 
    background-color: grey; 
 
    height: 75%; 
 
    float: right; 
 
} 
 

 
#header { 
 
    background-color: #6495ed; 
 
    width: 100%; 
 
    height: 20%; 
 
    float: left; 
 
    font: 200 100px/1.3 'Oleo Script', Helvetica, sans-serif; 
 
    color: white; 
 
    text-shadow: 4px 4px 0px rgba(0, 0, 0, 0.1); 
 
} 
 

 
#footer { 
 
    background-color: #6495ed; 
 
    height: 15%; 
 
    width: 100%; 
 
}

<link href='http://fonts.googleapis.com/css?family=Oleo+Script' rel='stylesheet' type='text/css'> 
 
<script src="C:\Users\nick.szilagyi\Desktop\PROJECT\JS\jquery-3.2.1.min.js"></script> 
 
<script src="C:\Users\nick.szilagyi\Desktop\PROJECT\JS\jquery-ui-1.12.1.custom\jquery-ui.js"></script> 
 

 
<div id="container"> 
 

 
    <div id="header"> 
 
    Terry 
 
    <div id="nav"> 
 
     <ul class="navli"> 
 
     <li><a href="#">Contact</a></li> 
 
     <li><a href="#">Teaching</a></li> 
 
     <li><a href="#">My research</a></li> 
 
     <li><a href="#">Home</a></li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
    <div id="leftcolumn">left</div> 
 
    <div id="rightcolumn">right</div> 
 
    <div id="footer">Footer</div> 
 
    
 
</div>

來源

2017-05-05 Nick Szilagyi

最簡單的事情可能是設置'.nav'到'顯示：內聯;'。這就是說，我會看看使用[**'flexbox' **]（https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties）。你也會遇到問題，在標題中設置字體大小，而標題本身是百分比高度。 – hungerstar

我會建議你從Bootstrap開始。你正在努力應對設計。 –

哇，我希望所有的，不僅僅是新的用戶都會問這樣的問題 - 正確的例子，明確的描述。一切安好。請看看答案，並考慮接受其中的一個，如果你覺得它有幫助。祝你好運:) –

您可以使用display: flex; justify-content: space-between; align-items: center;上的頭名和NAV推向兩側，垂直居中他們同時保持它們在同一行，然後無需浮動您的資產淨值或導航李的，所以我用display: inline-block，而是重新排列它們，以便它們在代碼中與頁面上顯示的順序相同。

你也許應該也刪除標頭上的height: 20%，並讓它成爲自然的高度，但是你沒有問這個，所以我沒有改變它。

html { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    height: inherit; 
 
} 
 

 
#container { 
 
    width: 100%; 
 
    height: inherit; 
 
    background-color: green; 
 
} 
 

 
#nav li { 
 
    font-family: Courier; 
 
    padding: 15px; 
 
    display: inline-block; 
 
} 
 

 
.navli { 
 
    list-style-type: none; 
 
    font-family: "Brush Script MT", cursive; 
 
    font-size: 24px; 
 
    font-style: normal; 
 
    font-variant: normal; 
 
    font-weight: bold; 
 
    line-height: 26.4px; 
 
    text-decoration: none; 
 
} 
 

 
a { 
 
    text-decoration: none; 
 
} 
 

 
#banner {} 
 

 
#leftcolumn { 
 
    width: 40%; 
 
    background-color: yellow; 
 
    height: 75%; 
 
    float: left; 
 
} 
 

 
#rightcolumn { 
 
    width: 60%; 
 
    background-color: grey; 
 
    height: 75%; 
 
    float: right; 
 
} 
 

 
#header { 
 
    background-color: #6495ed; 
 
    width: 100%; 
 
    height: 20%; 
 
    font: 200 100px/1.3 'Oleo Script', Helvetica, sans-serif; 
 
    color: white; 
 
    text-shadow: 4px 4px 0px rgba(0, 0, 0, 0.1); 
 
    display: flex; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
} 
 

 
#footer { 
 
    background-color: #6495ed; 
 
    height: 15%; 
 
    width: 100%; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel='stylesheet' type='text/css' href='stylesheetterry.css' /> 
 
    <link href='http://fonts.googleapis.com/css?family=Oleo+Script' rel='stylesheet' type='text/css'> 
 
    <script src="C:\Users\nick.szilagyi\Desktop\PROJECT\JS\jquery-3.2.1.min.js"></script> 
 

 
</head> 
 

 
<body> 
 
    <div id="container"> 
 

 
    <div id="header"> 
 
     <div>Terry</div> 
 
     <div id="nav"> 
 
     <ul class="navli"> 
 
      <li><a href="#">Home</a></li> 
 
      <li><a href="#">My research</a></li> 
 

 
      <li><a href="#">Teaching</a></li> 
 
      <li><a href="#">Contact</a></li> 
 

 
     </ul> 
 
     </div> 
 
    </div> 
 
    <div id="leftcolumn">left</div> 
 
    <div id="rightcolumn">right</div> 
 
    <div id="footer">Footer</div> 
 
    </div> 
 

 
</body>

來源

2017-05-05 16:42:54

這是你想要的嗎？：

body { 
 
    width: 100%; 
 
    height: inherit; 
 
} 
 

 
#container { 
 
    width: 100%; 
 
    height: inherit; 
 
    background-color: green; 
 
} 
 

 
#nav li { 
 
    float: right; 
 
    font-family: Courier; 
 
    padding: 15px; 
 
} 
 

 
.navli { 
 
    display: inline; 
 
    list-style-type: none; 
 
    font-family: "Brush Script MT", cursive; 
 
    font-size: 24px; 
 
    font-style: normal; 
 
    font-variant: normal; 
 
    font-weight: bold; 
 
    line-height: 26.4px; 
 
    text-decoration: none; 
 
} 
 

 
a { 
 
    text-decoration: none; 
 
} 
 

 
#banner {} 
 

 
#leftcolumn { 
 
    width: 40%; 
 
    background-color: yellow; 
 
    height: 75%; 
 
    float: left; 
 
} 
 

 
#rightcolumn { 
 
    width: 60%; 
 
    background-color: grey; 
 
    height: 75%; 
 
    float: right; 
 
} 
 

 
#header { 
 
    background-color: #6495ed; 
 
    width: 100%; 
 
    height: 20%; 
 
    float: left; 
 
    font: 200 100px/1.3 'Oleo Script', Helvetica, sans-serif; 
 
    color: white; 
 
    text-shadow: 4px 4px 0px rgba(0, 0, 0, 0.1); 
 
} 
 

 
#footer { 
 
    background-color: #6495ed; 
 
    height: 15%; 
 
    width: 100%; 
 
}

<link href='http://fonts.googleapis.com/css?family=Oleo+Script' rel='stylesheet' type='text/css'> 
 
<script src="C:\Users\nick.szilagyi\Desktop\PROJECT\JS\jquery-3.2.1.min.js"></script> 
 
<script src="C:\Users\nick.szilagyi\Desktop\PROJECT\JS\jquery-ui-1.12.1.custom\jquery-ui.js"></script> 
 

 
<div id="container"> 
 

 
    <div id="header"> 
 
    Terry 
 
    <div id="nav"> 
 
     <ul class="navli"> 
 
     <li><a href="#">Contact</a></li> 
 
     <li><a href="#">Teaching</a></li> 
 
     <li><a href="#">My research</a></li> 
 
     <li><a href="#">Home</a></li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
    <div id="leftcolumn">left</div> 
 
    <div id="rightcolumn">right</div> 
 
    <div id="footer">Footer</div> 
 
    
 
</div>

來源

2017-05-05 16:47:40

幾乎，不完全符合標題，但更接近我想要達到的目標 –

標題和導航列表的CSS問題 - 不對齊

回答

相關問題