웹 사이트의 이름과 함께 가로줄로 탐색 모음 항목을 표시하는 방법은 무엇입니까?

나는 & CSS 코딩에 초보입니다. 웹 사이트의 이름이 왼쪽에 있고 모든 탐색 옵션이 오른쪽에있는 가로선으로 된 탐색 모음을 만들려고합니다. 배너 이미지를 추가했지만 코드를 실행할 때 표시되지 않습니다. 이 배너 이미지를 내비게이션 막대 바로 아래에 표시하고 싶습니다. 현재 코드는 탐색 줄에 글 머리 기호가있는 옵션을 세로로 표시합니다. 도와주세요.웹 사이트의 이름과 함께 가로줄로 탐색 모음 항목을 표시하는 방법은 무엇입니까?

.wrapper{ 
    width:600px; 
    background:#eee; 
    margin: 0 auto 0 auto; 
} 

.heading{ 
    height:100px; 
    background:red; 
    padding:20px; 
    text-align: center; 
} 

.navigation{ 
    height:100px; 
    background: lightgreen; 
    width: 400%; 
    margin-top: 10px; 
    margin-bottom: 10px; 
    font-size:16pt; 
    font-family:impact; 
    padding:10px; 

} 

.navigation ul{ 
    list-style-type: none; 
    display: inline; 
    text-align: center; 
} 

.navigation ul li{ 
    list-style: none; 
    display: inline; 
    margin-right:30px; 
    padding:6px; 
} 

.navigation a{ 
    color:white; 
    text-decoration: none; 
} 

.navigation a:hover{ 
    color:black; 
} 

.banner{ 
background: url(mtp.png); 
background-size: cover; 
width: 100%; 
height:800px; 
position: fixed; 
top:100px; 
} 

.content{ 
    min-height: 100px; 
    background:#ddd; 
    width: 400px; 
    float: left; 
    position: relative; 
} 

.sidebar{ 
    width: 200px; 
    float:right; 
    background:lightblue; 
    min-height: 400px; 
} 

.footer{ 
    clear:both; 
    background:red; 
    height:40px; 
    color:white; 
    text-align:center; 
    padding:10px; 
}

내 HTML 코드는 다음과 같습니다 :

<!DOCTYPE html> 
<html> 
    <head> 
     <title>HELLO</title> 
     <link rel="stylesheet" href="style.css" type="text/css" /> 
    </head> 
    <body> 
     <div class="wrapper"> 
      <div class="heading"> 
      <h1>WEBSITE NAME</h1> 
     </div> 
     <div class="navigation" 
      <ul> 
       <li><a href="#">HOME</a></li> 
       <li><a href="#">LOGIN</a></li> 
       <li><a href="#">SIGN UP</a></li> 
      </ul> 
     </div> 
    <div id="container"> 
    <div id="banner"> 
    <h1>This is my banner</h1> 
    </div> 
    </div> 
     <div class="content"> 
     STAY  SHOP ATTRACTIONS 
     </div> 
     <div class="sidebar"> 
     DINE 
     </div> 
     <div class="footer" 
     All copyrights reserved 
     </div> 
    </div> 
    </body> 
</html>

출처

2017-01-12 MinjaNinja

업데이트를 통해 UR CSS는 다음과 같은 방법으로 많이

li{ 
list-style:none; 
float:left; 
margin-right:50px; 
} 

.heading{ 
    height:100px; 
    background:red; 
    padding:20px; 


}

wrapper { 
 
    width: 600px; 
 
    background: #eee; 
 
    margin: 0 auto 0 auto; 
 
} 
 
li { 
 
    list-style: none; 
 
    float: left; 
 
    margin-right: 50px; 
 
} 
 
.heading { 
 
    height: 100px; 
 
    background: red; 
 
    padding: 20px; 
 
} 
 
.navigation { 
 
    height: 100px; 
 
    background: lightgreen; 
 
    width: 400%; 
 
    margin-top: 10px; 
 
    margin-bottom: 10px; 
 
    font-size: 16pt; 
 
    font-family: impact; 
 
    padding: 10px; 
 
} 
 
.navigation ul { 
 
    list-style-type: none; 
 
    display: inline; 
 
    text-align: center; 
 
} 
 
.navigation ul li { 
 
    list-style: none; 
 
    display: inline; 
 
    margin-right: 30px; 
 
    padding: 6px; 
 
} 
 
.navigation a { 
 
    color: white; 
 
    text-decoration: none; 
 
} 
 
.navigation a:hover { 
 
    color: black; 
 
} 
 
.banner { 
 
    background: url(mtp.png); 
 
    background-size: cover; 
 
    width: 100%; 
 
    height: 800px; 
 
    position: fixed; 
 
    top: 100px; 
 
} 
 
.content { 
 
    min-height: 100px; 
 
    background: #ddd; 
 
    width: 400px; 
 
    float: left; 
 
    position: relative; 
 
} 
 
.sidebar { 
 
    width: 200px; 
 
    float: right; 
 
    background: lightblue; 
 
    min-height: 400px; 
 
} 
 
.footer { 
 
    clear: both; 
 
    background: red; 
 
    height: 40px; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 10px; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>HELLO</title> 
 
    <link rel="stylesheet" href="style.css" type="text/css" /> 
 
</head> 
 

 
<body> 
 
    <div class="wrapper"> 
 
    <div class="heading"> 
 
     <h1>WEBSITE NAME</h1> 
 
    </div> 
 
    <div class="navigation" <ul> 
 
     <li><a href="#">HOME</a> 
 
     </li> 
 
     <li><a href="#">LOGIN</a> 
 
     </li> 
 
     <li><a href="#">SIGN UP</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    <div id="container"> 
 
     <div id="banner"> 
 
     <h1>This is my banner</h1> 
 
     </div> 
 
    </div> 
 
    <div class="content"> 
 
     STAY SHOP ATTRACTIONS 
 
    </div> 
 
    <div class="sidebar"> 
 
     DINE 
 
    </div> 
 
    <div class="footer"> 
 
     All copyrights reserved 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

출처

2017-01-12 05:07:29

감사합니다. 그리고 네비게이션 바 왼쪽에 웹 사이트의 이름을 표시하는 방법을 안내해 주시겠습니까 ?? – MinjaNinja

@MinjaNinja는'float : left'을 사용합니다. –

어디에서이 문장을 작성해야합니까? 왜냐하면 탐색 클래스의 ul 태그 아래에 내 웹 사이트의 이름을 썼을 때 이전에 표시되었던 탐색 옵션조차 표시하지 않았기 때문입니다! – MinjaNinja

이

.heading { 
    float: left; 
}

거의 당신의 HTML 개선이 CSS를 추가

<div class="wrapper"> 
    <div class="heading"> 
     <h1>WEBSITE NAME</h1> 
    </div> 
    <div class="navigation"> 
     <ul> 
      <li><a href="#">HOME</a></li> 
      <li><a href="#">LOGIN</a></li> 
      <li><a href="#">SIGN UP</a></li> 
     </ul> 
    </div> 
    <div id="container"> 
     <div id="banner"> 
      <h1>This is my banner</h1> 
     </div> 
    </div> 
    <div class="content"> 
     STAY  SHOP ATTRACTIONS 
    </div> 
    <div class="sidebar"> 
     DINE 
    </div> 
    <div class="footer"> 
     All copyrights reserved 
    </div> 
</div>

출처

2017-01-12 05:01:36

웹 사이트의 이름과 함께 가로줄로 탐색 모음 항목을 표시하는 방법은 무엇입니까?

답변

관련 문제