Warum wird mein Abmelde-Link am Bildschirmrand angezeigt?

Question

Ich versuche rechts Navigationslinks auf der rechten Seite meiner Kopfzeile auszurichten. Also habe ich

  <ul class="nav navbar-nav navbar-right"> 
      <li><a href="#">My Subscriptions</a></li> 
      <li><a href="#">Help</a></li> 
      <li><a rel="nofollow" data-method="delete" href="/logout">Log Out</a></li> 
      </ul> 

und hinzugefügt, um diese Art

header ul { 
    float: right; 
    list-style: none; 
} 

header ul li { 
    float: left; 
    margin-left: 15px; 
} 

Aber mein Abmelden Link wird der Rand des Bildschirms abgehend - https://jsfiddle.net/p2rwgfjc/. Wie kann ich das ändern, so dass der gesamte Text auf dem Bildschirm bleibt?

Answer 1

Fügen Sie einfach margin-right: 15px zu Ihrem header ul hinzu.

header ul { 
    float: right; 
    list-style: none; 
    margin-right: 15px; 
} 

Fiddle:https://jsfiddle.net/og165aky/

Answer 2

Ich denke, wenn man etwas schwimmen, müssen Sie ihre Mutter schweben auch sonst das Element, das Sie schwebte haben verlässt die andere Struktur HTML-Elemente und wird ein separates Element herumschweben.

So float das Elternelement und geben Sie ihm einen Float von keiner oder erben.

Answer 3

Der Grund ist, dass die Blockbreite die Standardauffüllung enthält und Sie die 100% -Breite der Kopfzeile festgelegt haben, sodass die Gesamtbreite der Kopfzeile größer als 100% ist und über den Rand des Bildschirms hinausgeht. Sie sollten also den Standardrand und das Padding des Blocks löschen. Der bequemste Weg ist mit * {padding: 0, margin: 0}. Ich hoffe, diese Antwort kann Ihnen helfen!

Answer 4

1. vergessen float.
2. beachten Sie Ihre Wrapperbreite.
3. mit flex auf Ihrem Wrapper.
4. mit Flex auf Ihrem UL.

header{ 
 
    box-shadow: none; 
 
    background: #44505d; 
 
    border-bottom: none; 
 
    height: 73px; 
 
    display:flex; 
 
    flex-direction:row; 
 
    flex-wrap:wrap; 
 
    align-items:center; 
 
    justify-content:center; 
 
} 
 

 
.wrapperLogo{ 
 
width:30%;} 
 

 
header nav{ 
 
width:70%;} 
 

 

 
#logo { 
 
    font-size: 1.7em; 
 
    color: #fff; 
 
    text-transform: uppercase; 
 
    letter-spacing: -1px; 
 
    padding-top: 9px; 
 
    font-weight: bold; 
 
} 
 

 

 
#logo:hover { 
 
    color: #fff; 
 
    text-decoration: none; 
 
} 
 

 
header ul { 
 
    list-style: none; 
 
    display:flex; 
 
    justify-content:space-around; 
 
}

<header id="branding" class="clearFix"> 
 
    <div class="wrapperLogo"> 
 
    <a id="logo" href="#">sample app</a> 
 
    </div> 
 
\t <nav> 
 
\t <ul class="nav navbar-nav navbar-right"> 
 
\t <li><a href="#">My Subscriptions</a></li> 
 
\t <li><a href="#">Help</a></li> 
 
\t <li><a rel="nofollow" data-method="delete" href="/logout">Log Out</a></li> 
 
\t </ul> 
 
\t </nav> 
 
</header>

es ist nicht perfekt, ja natürlich. Sie müssen auch die mobile Ansicht ändern. wie Schrift und Breite und Höhe. usw.

Blick auf diese ein

header ul { 
     list-style: none; 
     display:flex; 
     justify-content:space-around; 
    } 

können Sie ändern, ohne Inhalt rechtfertigen oder Sie können es auch löschen und ändern Sie es mit Ihrem bisherigen css header ul li {margin-left:15px}