如何修复导航项的对齐方式？

时间：2015-07-12 17:16:20

标签： html css

我有一个问题，我无法看到登录＆＃39;登录＆＃39;要与导航栏的其余部分对齐的文本。使用margin或padding似乎根本无法推动它，我设法通过使用line-height:0将其缩小了3个像素，但它还不够。想法？

这是我试图实现的设计。

enter image description here

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 个答案:

答案 0 :(得分：2)

您的HTML / CSS中存在一些问题。我设法简化并修复它们，请查看此fiddle

另外，这里是代码片段......

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 -->

答案 1 :(得分：2)

首先需要解决几个问题。

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，删除了所有不必要的样式，请参阅下面的详细信息和演示。

<强> CodePen Demo

＆＃13;
＆＃13; 
/* 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;
}
＆＃13; 
<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 -->
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题