Wie die nav Elemente nach rechts oben

Question

<header class="top-header"> 
    <div class="container"> 
     <div class="logo"> 
      <img src="./dist/img/usjr-logo.png" alt="" href="http://www.usjr.edu.ph" id="logo"> 
     </div> 

     <nav class ="top-nav"> 
      <ul> 
       <li class="current"><a href="index.html">Link A1</a></li> 
       <li><a href="">Link A2</a></li> 
       <li><a href="">Link A3</a></li> 
      </ul> 
     </nav> 

    </div> 
</header> 

<nav class="navigation-menu"> 
    <ul> 
     <li><a href="#">Link B1</a></li> 
     <li><a href="#">Link B2</a></li> 
     <li><a href="#">Link B3</a></li> 
     <li><a href="#">Link B4</a></li> 
    </ul> 
</nav> 

zu positionieren, dass der Blockcode meiner Datei index.html

ist Und hier ist meine CSS-Datei:

@import url('https://fonts.googleapis.com/css?family=Nunito|Open+Sans'); 
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300'); 
/*@import "heading.css" ; */ 
/*Main Elements*/ 
* { - 
    margin : 0 ; border: 0; padding: 0; 
} 

body { 
    background-color :#ececec; 
    font: 14px/20px'Nunito','sans-serif'; 
    color : #444; margin : 0 ; 
} 

.wrapper { 
    margin : 0 auto; 
    width :70%; 
    clear : both; 
} 

.container { 
    margin-left : 30px; 
    margin-right : 30px; 
} 

img#logo{ 
    height : 80px; 
    width : auto; 
    margin : 10px; 
} 

ul { 
    list-style : none ; 
} 

nav.top-nav > ul > li { 
    display : inline-block; 
} 

nav.top-nav > ul > li > a{ 
    color :#fff; 
    text-decoration: none ; 
    padding : 30px ; 
    text-align : right ; 
} 


header.top-header { 
    margin-top : 10px; 
    background-color : #FFF; 
    height :100px; 
} 


nav.navigation-menu { 
    background-color : #444; 
    color : #fff; 
    height : 50px; 
} 

nav.navigation-menu > ul > li > a { 
    color : #FAB301 ; 
} 

hier ist ein Bild

Was ich will, ist an der Spitze der Link A's oben rechts-Mitte der Navigation der Top-Header-Klasse zu setzen. Wie kann ich es tun ?

Answer 1

FIDDLE

Wenn Sie die Menüoptionen den ganzen Weg auf die rechte Seite und am oberen Rand des Bildschirms möchten, ändern Sie die folgenden Schritte aus:

nav.top-nav { 
    position: absolute; 
    right: 0; 
    top: 0; 
} 
nav.top-nav > ul > li > a { 
    color: #000; 
    text-decoration: none; 
    padding: 0 0 0 10px; 
    text-align: right; 
} 

Answer 2

Fügen Sie diese:

.top-nav { 
    float: right; 
} 

Die CSS-Eigenschaft float gibt an, dass ein Element an der linken oder rechten Seite seines Containers platziert werden soll, wo text ein d Inline-Elemente werden sich darum wickeln. Dann wird das Element aus dem normalen Fluss der Webseite genommen, obwohl es immer noch ein Teil des Flusses ist, im Gegensatz zur absoluten Positionierung.

REF: https://developer.mozilla.org/en/docs/Web/CSS/float?v=example

@import url('https://fonts.googleapis.com/css?family=Nunito|Open+Sans'); 
 
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300'); 
 

 
/*@import "heading.css" ; */ 
 

 

 
/*Main Elements*/ 
 

 
* { 
 
    - margin: 0; 
 
    border: 0; 
 
    padding: 0; 
 
} 
 

 
body { 
 
    background-color: #ececec; 
 
    font: 14px/20px'Nunito', 'sans-serif'; 
 
    color: #444; 
 
    margin: 0; 
 
} 
 

 
.wrapper { 
 
    margin: 0 auto; 
 
    width: 70%; 
 
    clear: both; 
 
} 
 

 
.container { 
 
    margin-left: 30px; 
 
    margin-right: 30px; 
 
} 
 

 
img#logo { 
 
    height: 80px; 
 
    width: auto; 
 
    margin: 10px; 
 
} 
 

 
ul { 
 
    list-style: none; 
 
} 
 

 
nav.top-nav>ul>li { 
 
    display: inline-block; 
 
} 
 

 
.top-nav { 
 
    float: right; 
 
} 
 

 
nav.top-nav>ul>li>a { 
 
    color: #fff; 
 
    text-decoration: none; 
 
    padding: 30px; 
 
    text-align: right; 
 
} 
 

 
header.top-header { 
 
    margin-top: 10px; 
 
    background-color: #FFF; 
 
    height: 100px; 
 
} 
 

 
nav.navigation-menu { 
 
    background-color: #444; 
 
    color: #fff; 
 
    height: 50px; 
 
} 
 

 
nav.navigation-menu>ul>li>a { 
 
    color: #FAB301; 
 
}

<header class="top-header"> 
 
    <div class="container"> 
 
    <div class="logo"> 
 
     <img src="./dist/img/usjr-logo.png" alt="" href="http://www.usjr.edu.ph" id="logo"> 
 
    </div> 
 

 
    <nav class="top-nav"> 
 
     <ul> 
 
     <li class="current"><a href="index.html">Link A1</a></li> 
 
     <li><a href="">Link A2</a></li> 
 
     <li><a href="">Link A3</a></li> 
 
     </ul> 
 
    </nav> 
 

 
    </div> 
 
</header> 
 

 
<nav class="navigation-menu"> 
 
    <ul> 
 
    <li><a href="#">Link B1</a></li> 
 
    <li><a href="#">Link B2</a></li> 
 
    <li><a href="#">Link B3</a></li> 
 
    <li><a href="#">Link B4</a></li> 
 
    </ul> 
 
</nav>

Answer 3

Ich würde es über die obere Fläche absolut positioniert und verwende top: 50%; transform: translateY(-50%)); es vertikal zu zentrieren.

@import url('https://fonts.googleapis.com/css?family=Nunito|Open+Sans'); 
 
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300'); 
 

 
/*@import "heading.css" ; */ 
 

 

 
/*Main Elements*/ 
 

 
* { 
 
    - margin: 0; 
 
    border: 0; 
 
    padding: 0; 
 
} 
 

 
body { 
 
    background-color: #ececec; 
 
    font: 14px/20px'Nunito', 'sans-serif'; 
 
    color: #444; 
 
    margin: 0; 
 
} 
 

 
.wrapper { 
 
    margin: 0 auto; 
 
    width: 70%; 
 
    clear: both; 
 
} 
 

 
.container { 
 
    margin-left: 30px; 
 
    margin-right: 30px; 
 
} 
 

 
img#logo { 
 
    height: 80px; 
 
    width: auto; 
 
    margin: 10px; 
 
} 
 

 
ul { 
 
    list-style: none; 
 
} 
 

 
nav.top-nav > ul > li { 
 
    display: inline-block; 
 
} 
 

 
nav.top-nav > ul > li > a { 
 
    color: #fff; 
 
    text-decoration: none; 
 
    padding: 30px; 
 
    text-align: right; 
 
} 
 

 
header.top-header { 
 
    margin-top: 10px; 
 
    background-color: #FFF; 
 
    height: 100px; 
 
} 
 

 
nav.navigation-menu { 
 
    background-color: #444; 
 
    color: #fff; 
 
    height: 50px; 
 
} 
 

 
nav.navigation-menu > ul > li > a { 
 
    color: #FAB301; 
 
} 
 
    
 
.top-header .container { 
 
    position: relative; 
 
} 
 
    
 
.top-nav { 
 
    background: rgba(0,0,0,0.5); 
 
    position: absolute; 
 
    top: 50%; right: 0; 
 
    transform: translateY(-50%); 
 
}

<header class="top-header"> 
 
    <div class="container"> 
 
    <div class="logo"> 
 
     <img src="./dist/img/usjr-logo.png" alt="" href="http://www.usjr.edu.ph" id="logo"> 
 
    </div> 
 

 
    <nav class="top-nav"> 
 
     <ul> 
 
     <li class="current"><a href="index.html">Link A1</a></li> 
 
     <li><a href="">Link A2</a></li> 
 
     <li><a href="">Link A3</a></li> 
 
     </ul> 
 
    </nav> 
 

 
    </div> 
 
</header> 
 

 
<nav class="navigation-menu"> 
 
    <ul> 
 
    <li><a href="#">Link B1</a></li> 
 
    <li><a href="#">Link B2</a></li> 
 
    <li><a href="#">Link B3</a></li> 
 
    <li><a href="#">Link B4</a></li> 
 
    </ul> 
 
</nav>