CSS встроенное меню навигации и название сайта

Question

Так что это первый раз, когда я использую CSS (просматриваю некоторую документацию), и у меня есть эта проблема.

Я создал навигационное меню, горизонтальное с правой стороны, и я хочу, чтобы название сайта на левой стороне, встроенный в него. Я пробовал несколько вещей, но он либо поднимается, либо перемещает меню ниже, либо помещает его под меню.

Последнее, что я пробовал, но, похоже, я больше не могу использовать свойство padding-top (однако, я могу использовать padding-left). Я был бы признателен, если бы кто-нибудь из вас мог помочь мне с этим последним. Спасибо!

CSS-код: (это грязно, я знаю, как я уже сказал, моя первая одна :))

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

Во-первых, вы не можете поставить <p> внутри <ul>.

Вы можете достичь того, чего хотите, разместив логотип внутри <li> и используйте float:left;.

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>