CSS Inline-Navigation Menü und Website-Titel

Question

So ist es das erste Mal, dass ich CSS (habe durch einige Dokumentation) und ich habe dieses Problem.

Ich habe ein Navigationsmenü erstellt, ein horizontales auf der rechten Seite, und ich möchte den Titel der Website auf der linken Seite haben, inline damit. Ich habe ein paar Dinge ausprobiert, aber es geht entweder nach oben und bewegt das Menü nach unten oder legt es unter das Menü.

Das letzte, was ich versucht habe funktioniert, aber es scheint, dass ich nicht mehr die Padding-Top-Eigenschaft verwenden kann (aber ich kann Padding-links verwenden). Ich wäre dankbar, wenn einer von euch mir bei dieser letzten Sache helfen könnte. Vielen Dank!

Der CSS-Code: (es ist chaotisch, ich weiß, wie ich schon sagte, mein erstes :))

ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    position: relative; 
    padding-top: 10px; 
    padding-right: 50px; 
} 

li { 
    float: right; 
    font-family: 'Raleway'; 
    font-size: 20px; 
} 

a { 
    display: block; 
    padding: 20px; 
    background-color: transparent; 
    color: black; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
} 

a:hover { 
    color: orangered; 
} 


/* Logo */ 

#logo { 
    float: left; 
    display: inline-block; 
    position: relative; 
    padding-left: 200px; 
    padding-top: -250px; 
    font-family: 'Raleway'; 
    font-size: 30px; 
} 


/* Fonts */ 


@font-face { 
    font-family: Raleway; 
    src: url(/css/fonts/raleway.ttf); 
} 

Answer 1

Zuerst können Sie keine <p> in einem <ul> setzen.

Sie können erreichen, was Sie wollen, indem Sie das Logo in eine <li> setzen und float:left; verwenden.

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    position: relative; 
 
    padding-top: 10px; 
 
    padding-right: 50px; 
 
} 
 

 
li { 
 
    float: right; 
 
    font-family: 'Raleway'; 
 
    font-size: 20px; 
 
} 
 

 
a { 
 
    display: block; 
 
    padding: 20px; 
 
    background-color: transparent; 
 
    color: black; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 

 
a:hover { 
 
    color: orangered; 
 
} 
 

 

 
/* Logo */ 
 

 
#logo { 
 
    float: left; 
 
    font-size: 30px; 
 
} 
 

 

 
/* Fonts */ 
 

 

 
@font-face { 
 
    font-family: Raleway; 
 
    src: url(/css/fonts/raleway.ttf); 
 
}

   <ul> 
 
        <li id="logo">Cluj</li> 
 
        
 
        <li><a href="contact.html">CONTACT</a></li> 
 
        <li><a href="imagini.html">IMAGINI</a></li> 
 
        <li><a href="stiri.html">STIRI</a></li> 
 
        <li><a href="evenimente.html">EVENIMENTE</a></li> 
 
        <li><a href="index.html">ACASA</a></li> 
 
       </ul>