CSS內聯導航菜單和網站標題

Question

所以這是我第一次使用CSS（一直在尋找一些文檔），我有這個問題。

我創建了一個導航菜單，右邊是一個水平的導航菜單，我想在左邊有網站標題，並與之對齊。我嘗試了幾件事情，但它要麼將其放下並將菜單移動到較低位置，要麼放在菜單下。

我試過的最後一件事情，但似乎我不能再使用padding-top屬性（但是，我可以使用填充左側）。如果你們中的任何一位能夠幫助我完成最後一件事情，我將不勝感激。謝謝！

的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>