CSS 인라인 탐색 메뉴 및 웹 사이트 제목

Question

CSS를 처음 사용할 때 (일부 설명서를 살펴본 결과)이 문제가 있습니다.

오른쪽에 가로형 탐색 메뉴를 만들었고 웹 사이트 제목이 왼쪽에 인라인으로 표시되도록하고 싶습니다. 나는 몇 가지 시도를했지만, 그것을 가져다가 메뉴를 아래로 움직이거나 메뉴 아래 놓습니다.

내가 시도한 마지막 일은 더 이상 패딩 - 가기 속성을 사용할 수 없다 (그러나 패딩 왼쪽을 사용할 수 있음). 당신 중 누구라도이 마지막 일로 나를 도울 수 있다면 감사 할 것입니다. 고맙습니다!

CSS 코드 : 당신은 <ul> 내부 <p>을 넣을 수 없습니다, 첫 번째

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

(내가 말한대로 내 첫 번째 :), 나도 알아, 지저분한이다).

로고를 <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>