2017-12-22 25 views

답변

0

ul {padding: 16px; 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333333; 
 
} 
 

 
li { 
 
    float: left; 
 
    width:150px; 
 
} 
 
ul { display: inline-block; 
 
} 
 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 16px; 
 
    text-decoration: none; 
 
} 
 

 
li a:hover { 
 
    background-color: #111111; 
 
}
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
</head> 
 
<body> 
 
<div style="text-align:right"> 
 
<ul> 
 
    <li><a href="#home">Home</a></li> 
 
    <li><a href="#news">News</a></li> 
 
    <li><a href="#contact">Contact</a></li> 
 
    <li><a href="#about">About</a></li> 
 
</ul> 
 
</div> 
 
</body> 
 
</html>

을 할 것입니다 에 대한 폭 때에 프로퍼티를 setiing
0

당신은 그들 사이의 공간을 만들기 위해 각 링크에 여백을 추가 할 수 있습니다. 너비를 100 %로 설정할 수도 있습니다.

li a { 
display: block; 
color: white; 
text-align: center; 
padding: 16px; 
text-decoration: none; 
margin-right: 20px; 
} 

ul { 
padding: 16px; 
list-style-type: none; 
margin: 0; 
padding: 0; 
overflow: hidden; 
background-color: #333333; 
width: 100%; 
}