标题和导航列表的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问题 - 不对齐

回答

相关问题