ul li 가로정렬
li에 float : left로 왼쪽 정렬하고 margin:1px을 설정하여 박스의 여백을 설정한다. 그리고 박스의 텍스트는 li a에 text-align : center로 가운데 정렬을 하면 된다. 링크는 <a href="#">를 통해 URL을 넣어주면 완성된다.
li {float:left; list-style:none; margin:1px;}
li a {display:block; width:150px; height:40px; background:#c00; color:#fff; border1px solid blue; font-size:12px; font-family:"돋움";
text-align:center; padding-top:10px; text-decoration:none;}
li a span {display:block;}
li a:hover {background:#099; text-decoration:none;}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ul li 가로정렬</title>
<style type="text/css">
* {margin:0; padding:0;}
li {float:left; list-style:none; margin:1px;}
li a {display:block; width:150px; height:40px; background:#c00; color:#fff; border1px solid blue; font-size:12px; font-family:"돋움";
text-align:center; padding-top:10px; text-decoration:none;}
li a span {display:block;}
li a:hover {background:#099; text-decoration:none;}
</style>
</head>
<body>
<ul>
<li><a href="#">COMPANY<span>회사소개</span></a></li>
<li><a href="#">PRODUCT<span>제품소개</span></a></li>
<li><a href="#">SERVICE<span>유지보수</span></a></li>
<li><a href="#">CUSTOMER<span>고객지원</span></a></li>
<li><a href="#">EDUCATION<span>협력업체</span></a></li>
</ul>
</body>
</html>
※ 소스가 필요하신분은 댓글 남겨주시면 소스 보내드리겠습니다. ※
[홈페이지만들기] - first-child / last-child 활용하기
'홈페이지만들기 > Html_css&css3' 카테고리의 다른 글
| html 순서 및 목록 만들기 (2) | 2017.02.02 |
|---|---|
| html 창크기 조절(반응형코딩) (7) | 2017.01.28 |
| div 프레임나누기 (2) | 2017.01.25 |
| div 배치하기 (0) | 2017.01.24 |
| html 테이블구조 만들기 (0) | 2016.12.30 |
