Align Grenze mit Text

Question

Hallo Leute ich aus irgendeinem Grund scheinen kann meine Grenze Ich habe auf meine navbar mit meinem Text überhaupt allign: Sie können Here

Jedes Mal, wenn ich versuchen und margin-top in der Geige sehen die Grenze es bewegt alles runter. Die navbar Text selbst ist an der richtigen Stelle auf meiner Webseite, ich möchte nur die tatsächlichen Grenzlinien nach unten mit der Position des Textes

body { 
 
    font-family: 'Open Sans', sans-serif, Arial; 
 
    font-size: 16px; 
 
    color: #6D6D6D; 
 
    background-color: black; 
 
    font-weight: 300; 
 
} 
 

 
.navbar-default { 
 
    background-color: transparent; 
 
    border-top: 0px solid rgba(0, 0, 0, 0.5); 
 
    border-bottom: 0px solid rgba(0, 0, 0, 0.5); 
 
    border-left: 0px solid rgba(0, 0, 0, 0.5); 
 
    border-right: 0px solid rgba(0, 0, 0, 0.5); 
 
    -webkit-transition: background-color 200ms linear; 
 
    -moz-transition: background-color 200ms linear; 
 
    -o-transition: background-color 200ms linear; 
 
    -ms-transition: background-color 200ms linear; 
 
    transition: background-color 200ms linear; 
 
    padding-top: 9px; 
 
    padding-bottom: 20px; 
 
} 
 

 
.navbar.navbar-default .navbar-collapse { 
 
    border: 0; 
 
    -webkit-box-shadow: none; 
 
    box-shadow: none; 
 
} 
 

 
.navbar-nav>li { 
 
    border-right: 1px solid white; 
 
    height: 20px; 
 
    padding-left: 28px; 
 
    padding-top: 25px; 
 
} 
 

 
.navbar-nav>li:last-child { 
 
    border: none; 
 
} 
 

 
.navbar-default .navbar-toggle { 
 
    border-color: rgba(0, 0, 0, 0); 
 
} 
 

 
.navbar-default .navbar-toggle .icon-bar { 
 
    background-color: #fff; 
 
} 
 

 
.navbar-toggle { 
 
    margin-top: 19px; 
 
    margin-right: 43px; 
 
} 
 

 
.navbar-default .navbar-nav>li>a { 
 
    color: white; 
 
    font-size: 15px; 
 
    line-height: 1px; 
 
} 
 

 
.navbar-default .navbar-nav>li>a:hover, 
 
.navbar-default .navbar-nav>li>a:focus { 
 
    background-color: #FFC600; 
 
    text-decoration: none; 
 
    color: #ffffff; 
 
    -webkit-transition: background-color 200ms linear; 
 
    -moz-transition: background-color 200ms linear; 
 
    -o-transition: background-color 200ms linear; 
 
    -ms-transition: background-color 200ms linear; 
 
    transition: background-color 200ms linear; 
 
}

<nav class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 
     <button class="navbar-toggle" data-target="#myNavbar" data-toggle="collapse" type="button"> 
 
\t \t \t \t \t <span class="icon-bar"></span> <span class="icon-bar"></span> 
 
\t \t \t \t \t <span class="icon-bar"></span> 
 
\t \t \t \t \t </button> 
 
     <a class="navbar-brand"><img alt="" src="Images/logo.png" class="img-responsive"></a> 
 
    </div> 
 
    <div class="collapse navbar-collapse" id="myNavbar"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li> 
 
      <a href="#">Home</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">About Us</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">Services</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">Contact Us</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav>

Answer 1

Bitte korrigieren Sie die folgenden CSS ausrichten Class es sieht besser aus, bitte lassen Sie mich wissen, wenn Sie Probleme mit diesem Update haben.

.navbar-nav>li { 
    border-right: 1px solid white; 
    padding-left: 14px; 
    padding-right: 14px; 
    height: 100%; 
} 

JSFiddle Demo

Answer 2

Sie haben vergessen a

.navbar-nav>li a { // ... 
.navbar-nav>li:last-child a { // ... 

Entfernen Polsterung, lass es einfach wie es vorher war. fiddle

Answer 3

Ich bemerkte, dass Sie eine Auffüllung der .navbar-nav>li hatte, die dieses Problem verursachte.

Hier ist die aktualisierte CSS:

body { 
    font-family: 'Open Sans', sans-serif, Arial; 
    font-size: 16px; 
    color: #6D6D6D; 
    background-color: black; 
    font-weight: 300; 
} 



.navbar-default { 
    background-color: transparent; 
    border-top: 0px solid rgba(0, 0, 0, 0.5); 
    border-bottom: 0px solid rgba(0, 0, 0, 0.5); 
    border-left: 0px solid rgba(0, 0, 0, 0.5); 
    border-right: 0px solid rgba(0, 0, 0, 0.5); 
    -webkit-transition: background-color 200ms linear; 
    -moz-transition: background-color 200ms linear; 
    -o-transition: background-color 200ms linear; 
    -ms-transition: background-color 200ms linear; 
    transition: background-color 200ms linear; 
    padding-top: 9px; 
    padding-bottom: 20px; 
} 

.navbar.navbar-default .navbar-collapse { 
    border: 0; 
    -webkit-box-shadow: none; 
    box-shadow: none; 
} 

.navbar-nav>li { 
     border-right: 1px solid white; 
    height: 30px; 
    text-align:center; 
} 

.navbar-nav>li:last-child{ 
    border: none; 
} 
.navbar-default .navbar-toggle { 
    border-color: rgba(0, 0, 0, 0); 
} 

.navbar-default .navbar-toggle .icon-bar { 
    background-color: #fff; 
} 


.navbar-toggle { 
    margin-top: 19px; 
    margin-right: 43px; 
} 

.navbar-default .navbar-nav>li>a { 
    color: white; 
    font-size: 15px; 
    line-height: 1px; 
} 

.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus { 
    background-color: #FFC600; 
    text-decoration: none; 
    color: #ffffff; 
    -webkit-transition: background-color 200ms linear; 
    -moz-transition: background-color 200ms linear; 
    -o-transition: background-color 200ms linear; 
    -ms-transition: background-color 200ms linear; 
    transition: background-color 200ms linear; 
} 

Und ein Arbeits Link: https://jsfiddle.net/DTcHh/38351/