堆栈内存溢出
  简体   繁体   English

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

[英]How to fix the alignment of the navigation items?

 原文  2015-07-12 17:16:20  3   2    html/ css

问题描述

I'm having an issue where I can't see to get the 'Log in' text to be aligned with the rest of the navigation bar. 我遇到了一个问题，我无法看到“登录”文本与导航栏的其余部分对齐。 Using margin or padding doesn't seem to push it up at all, and I managed to get it 3 pixels out by using line-height:0 but it wasn't enough. 使用margin或padding似乎根本没有推高它，我设法通过使用line-height:0得到3像素line-height:0但这还不够。 Ideas? 想法？

This is the design that I'm trying to achieve. 这是我想要实现的设计。

在此输入图像描述

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

You had a couple of problems in your HTML/CSS. 您的HTML / CSS中存在一些问题。 I managed to simplify and fix them, check this fiddle 我设法简化并修复它们，检查这个小提琴

Also, here's the code snippets... 另外，这是代码片段......

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

There are a couple of issues need to be fixed first. 首先需要解决几个问题。

1 <img> is a self-closing tag, remove </img> from <img src="Images/Triangle.PNG"> </img> , or use <img src="" /> 1 <img>是自闭合标签，除去</img>从<img src="Images/Triangle.PNG"> </img>或使用<img src="" />

2 It's missing a closing > here <span class="glyphicon glyphicon-triangle-bottom" </span> 2它缺少一个结束>这里<span class="glyphicon glyphicon-triangle-bottom" </span>

3 Remove the ) from <a href="Evosite.html" class="NavHome" id="Current")> 3从<a href="Evosite.html" class="NavHome" id="Current")>删除)

The best way to get the login button in the right place is to adjust the structure slightly, to move it next to the navigation bar. 在正确的位置获取登录按钮的最佳方法是稍微调整结构，将其移动到导航栏旁边。 And don't use <h1> for it, as it's not a headline. 并且不要使用<h1> ，因为它不是标题。

I rewrote most of the CSS, removed all the unnecessary styles, see the details and demo below. 我重写了大部分CSS，删除了所有不必要的样式，请参阅下面的详细信息和演示。

CodePen Demo CodePen演示 

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何修复导航栏中徽标的错误对齐方式？ - How to fix wrong alignment of logo in navigation bar? 如何修复导航中下拉菜单的对齐方式 - How to fix the alignment of the dropdown menu in a navigation Css修复 - div中不正确对齐的图表项 - Css fix - chart items in a div improper alignment 如何修正文字对齐方式 - How to fix text-alignment 我该如何解决这个对齐问题？ - How can I fix this alignment? 如何修复聊天框中的 div 对齐？ - How to fix div Alignment in chatbox? 如何修复MaterializeCSS垂直对齐 - How to fix MaterializeCSS vertical alignment 如何修复 div alignment 问题？ - How to fix div alignment issue? 如何修复输入和按钮 alignment - How to fix input and button alignment 在较小的屏幕上保持不同宽度的导航项的对齐 - Maintaining alignment of navigation items of different widths on smaller screens
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM