如何修复导航项的对齐方式？
[英]How to fix the alignment of the navigation items?
问题描述
我遇到了一个问题，我无法看到“登录”文本与导航栏的其余部分对齐。 使用margin或padding似乎根本没有推高它，我设法通过使用line-height:0得到3像素line-height:0但这还不够。 想法？
这是我想要实现的设计。
HTML
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="EvositeCSS.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> </script>
<link href='http://fonts.googleapis.com/css?family=Bree+Serif' rel='stylesheet' type='text/css'>
<script src="EvositeJS.js"> </script>
</head>
<body>
<div class="wrapper">
<div class="NavBar">
<div class="VictoriaHouse">
<img src="Images/VictoriaHouse.JPG" alt="Victoria House & Viney Court">
</div>
<div class="ActivePage">
<img src="Images/Triangle.PNG"> </img>
</div>
<div class= "LoginContainer">
<div class="DownTriangle">
<span class="glyphicon glyphicon-triangle-bottom" </span>
</div>
<h1 class="LoginTxt">Log in </h1>
</div>
<ul>
<li> <a href="Evosite.html" class="NavHome" id="Current")> Home </a> </li>
<li> <a href="#" class="NavLink"> News </a> </li>
<li> <a href="#" class="NavLink"> Tenants </a> </li>
<li> <a href="#" class="NavLink"> Heritage </a> </li>
<li> <a href="#" class="NavLink"> About Us </a> </li>
<li> <a href="#" class="NavLink"> Book the Meeting Room </a> </li>
<li> <a href="#" class="NavContact"> Contact Us </a> </li>
</ul>
</div> <!-- Ends NavBar <-->
</div> <!-- Ends wrapper -->
</body>
</html>
CSS
@charset "utf-8";
/* CSS Document */
.wrapper {
width:100%;
height:100%;
margin-left:auto;
margin-right:auto;
}
.VictoriaHouse {
padding-left:270px;
padding-top:20px;
padding-bottom:20px;
padding-right:140px;
float:left;
}
/* NavBar formatting */
.NavBar {
float:inline-block;
text-decoration:none;
}
ul {
float:inline-block;
padding-top:45px;
}
li {
display: inline;
}
a {
font-family: Bree Serif;
font-size:20px
}
a:link {
color:#002D62;
background-color:white;
}
a:visited {
color:#002D62;
text-decoration:none;
background-color:white;
}
a:hover {
text-decoration:none;
color: #007D68; /* Green */
}
a:active{
text-decoration:none;
color: #F68E56; /* orange */
}
.NavLink {
margin-left:20px;
text-decoration:none;
}
.NavHome {
margin-left:30px;
text-decoration:none;
}
.NavContact {
margin-left:20px;
text-decoration:none;
}
#Current {
color: #F68E56; /* orange */
}
.ActivePage {
float:left;
padding-top:25px;
padding-left:50px;
width:auto;
}
.LoginTxt {
font-family: Bree Serif;
font-size:20px;
color:#FF5A40;
padding-left:25px;
float:left;
}
.LoginContainer {
border-style:solid;
border-width:1.5px;
border-radius:5px;
border-color:#F68E56;
width:120px;
height:40px;
float:right;
margin-right:300px;
margin-top:40px;
}
.DownTriangle {
padding-left:90px;
padding-top:15px;
float:left;
position:relative;
}
.LoginTxtContainer {
margin-top:10px;
}
2 个解决方案
解决方案1
2 2015-07-12 17:37:46
您的HTML / CSS中存在一些问题。 我设法简化并修复它们，检查这个小提琴
另外，这是代码片段......
CSS
/* CSS Document */
.wrapper {
width:100%;
height:100%;
margin-left:auto;
margin-right:auto;
}
.VictoriaHouse {
padding-left:270px;
padding-top:20px;
padding-bottom:20px;
padding-right:140px;
float:left;
}
/* NavBar formatting */
.NavBar {
float:inline-block;
text-decoration:none;
}
ul {
display:inline-block;
padding-top:45px;
}
li {
display: inline;
}
a {
font-family: Bree Serif;
font-size:20px
}
a:link {
color:#002D62;
background-color:white;
}
a:visited {
color:#002D62;
text-decoration:none;
background-color:white;
}
a:hover {
text-decoration:none;
color: #007D68; /* Green */
}
a:active{
text-decoration:none;
color: #F68E56; /* orange */
}
.NavLink {
margin-left:20px;
text-decoration:none;
}
.NavHome {
margin-left:30px;
text-decoration:none;
}
.NavContact {
margin-left:20px;
text-decoration:none;
}
#Current {
color: #F68E56; /* orange */
}
.ActivePage {
float:left;
padding-top:25px;
padding-left:50px;
width:auto;
}
.LoginContainer {
border-style:solid;
border-width:1.5px;
border-radius:5px;
border-color:#F68E56;
float:right;
margin-right:300px;
margin-top:40px;
line-height: 40px;
padding-left: 20px;
}
.LoginTxt {
font-family: Bree Serif;
font-size:20px;
color:#FF5A40;
display: inline-block;
margin:0;
}
.LoginContainer .downArrow {
padding-left: 10px;
padding-right: 5px;
}
HTML
<div class="wrapper">
<div class="NavBar">
<div class="VictoriaHouse">
<img src="Images/VictoriaHouse.JPG" alt="Victoria House & Viney Court"/>
</div>
<div class="ActivePage">
<img src="Images/Triangle.PNG"/>
</div>
<div class= "LoginContainer">
<h1 class="LoginTxt">Log in</h1>
<span class="downArrow glyphicon glyphicon-triangle-bottom"></span>
</div>
<ul>
<li> <a href="Evosite.html" class="NavHome" id="Current")> Home </a> </li>
<li> <a href="#" class="NavLink"> News </a> </li>
<li> <a href="#" class="NavLink"> Tenants </a> </li>
<li> <a href="#" class="NavLink"> Heritage </a> </li>
<li> <a href="#" class="NavLink"> About Us </a> </li>
<li> <a href="#" class="NavLink"> Book the Meeting Room </a> </li>
<li> <a href="#" class="NavContact"> Contact Us </a> </li>
</ul>
</div> <!-- Ends NavBar <-->
</div> <!-- Ends wrapper -->
解决方案2
2 已采纳 2015-07-12 20:52:14
首先需要解决几个问题。
1 <img>是自闭合标签，除去</img>从<img src="Images/Triangle.PNG"> </img>或使用<img src="" />
2它缺少一个结束>这里<span class="glyphicon glyphicon-triangle-bottom" </span>
3从<a href="Evosite.html" class="NavHome" id="Current")>删除)
在正确的位置获取登录按钮的最佳方法是稍微调整结构，将其移动到导航栏旁边。 并且不要使用<h1> ，因为它不是标题。
我重写了大部分CSS，删除了所有不必要的样式，请参阅下面的详细信息和演示。
/* For Demo Only */ @import url("https://fonts.googleapis.com/css?family=Bree+Serif"); @import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"); /* CSS Document */ body { font-family: "Bree Serif"; } .wrapper { width: 1200px; margin: 0 auto; padding: 20px; } /* NavBar formatting */ .NavBar { overflow: auto; font-size: 20px; } .VictoriaHouse, .MainNavigation { float: left; } .MainNavigation { padding-top: 30px; } .MainNavigation ul { margin: 0; padding: 0 0 0 20px; } .MainNavigation li { display: inline-block; vertical-align: top; } .MainNavigation a { margin: 0 10px; text-decoration: none; color: #000; display: block; position: relative; } .MainNavigation #Current:after, .MainNavigation a:hover:after { content: url("http://i.imgur.com/zN4WiYV.png"); color: #F68E56; width: 100%; text-align: center; position: absolute; top: -20px; left: 0; } .MainNavigation a:hover { color: #007D68; } .LoginContainer { float: right; margin-top: 25px; border: 1px solid #F68E56; border-radius: 5px; width: 120px; height: 40px; line-height: 40px; text-align: center; } .LoginContainer .LoginTxt { text-decoration: none; color: #FF5A40; } .LoginTxt .glyphicon { font-size: 14px; color: #000; } .LoginTxt:hover .glyphicon { color: #FF5A40; }
<div class="wrapper"> <div class="NavBar"> <div class="VictoriaHouse"> <img src="http://i.imgur.com/eB6yyLi.jpg" alt="Victoria House & Viney Court" /> </div> <div class="MainNavigation"> <ul> <li> <a href="Evosite.html" class="NavHome" id="Current"> Home </a> </li> <li> <a href="#" class="NavLink"> News </a> </li> <li> <a href="#" class="NavLink"> Tenants </a> </li> <li> <a href="#" class="NavLink"> Heritage </a> </li> <li> <a href="#" class="NavLink"> About Us </a> </li> <li> <a href="#" class="NavLink"> Book the Meeting Room </a> </li> <li> <a href="#" class="NavContact"> Contact Us </a> </li> </ul> </div> <div class="LoginContainer"> <a class="LoginTxt" href="#"> Log in <span class="glyphicon glyphicon-triangle-bottom"></span> </a> </div> </div> <!-- Ends NavBar <--> </div> <!-- Ends wrapper -->
在较小的屏幕上保持不同宽度的导航项的对齐
[英]Maintaining alignment of navigation items of different widths on smaller screens
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.