ul li 가로정렬로 메뉴만들기

전봉근 2019. 12. 26. 01:54

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

출처: http://itnamu21.tistory.com/81 [미래디자인 life]

저작자표시 비영리 변경금지 (새창열림)