티스토리 뷰
기타 웹스킬/css

css li 더블마진

뉴봉 2015. 10. 7. 15:31
반응형

사파리,오페라,크롬,파이어폭스에서는 메뉴간 간격이 5px




익스에서는 더블마진으로 메뉴간 간격이 5px를 넘어섬!!

7px의 간격이 생기는 듯!!!




이런 걸 용어상 더블마진이라고 하던데..

늘 부딪히는 문제지만, 매번 -_- 해결방법을 찾고 있는 ㅠㅠ


라운드 처리 때문에 css코드가 상당히 길다능..

익스 하위 버전에서는 라운드 처리가 안될테다.. filter를 빼버려서 ㅎㅎ


<style type="text/css">

li {list-style:none;}


#nav {
 margin:0;
 padding:0;
 *zoom:1;
}
#nav:after {
 content:'';
 content:none;
 clear:both;
 display:block;
}
#nav li {
 display:inline-block;
 margin-bottom:10px;
 padding:0 15px;
 font:bold 14px/23px "돋움", dotum, "굴림",gulim;
 height:45px;
 line-height:45px;
 border-width:1px;
 text-align:center;
 text-decoration:none;
 background-color: #999;
 border-radius:5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 -khtml-border-radius: 5px;
 -o-border-radius: 5px;
 -ms-border-radius: 5px;
 color:#333;
}
#nav a{
 text-decoration:none;
 color:#fff; 
}
#nav li:link,
#nav li:visited {
 background-color: #ccc;
 border-radius:5px;
 border-width:1px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 -khtml-border-radius: 5px;
 -o-border-radius: 5px;
 -ms-border-radius: 5px;
 color:#333;
}

#nav li:hover,
#nav li:active {
 background-color: #f33f2a;
 border-radius:5px;
 border-width:1px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 -khtml-border-radius: 5px;
 -o-border-radius: 5px;
 -ms-border-radius: 5px;
 color:#fff;
}
</style>
</head>
<body>
<ul id="nav">
 <li><a href="http://malza.com">menu1</a></li>
 <li><a href="http://malza.com">menu2</a></li>
 <li><a href="http://malza.com">menu3</a></li>
 <li><a href="http://malza.com">menu4</a></li>
 <li><a href="http://malza.com">menu5</a></li>
</ul>
</body>
</html>



li에 *font-size:0;  *line-height:0; 적용하면 문제가 해결된다고 하던데 난 안된다..

코드가 뒤죽여서 그런 것일 수도


li에 한 줄로 나오게 하기 위해 display:inline-block; 을 줬는데 float:left;을 추가해주면 의도치 않은 벌어짐 간격은 정리가 된다.


#nav li {

 float:left;  <--추가
 display:inline-block;
 margin-bottom:10px;
 padding:0 15px;
 font:bold 14px/23px "돋움", dotum, "굴림",gulim;
 height:45px;
 line-height:45px;
 border-width:1px;
 text-align:center;
 text-decoration:none;
 background-color: #999;

...


사파리,오페라,크롬,파이어폭스




익스11



익스7




상위를 사용중인데도 더블마진값은 사라지지 않네 ㅠㅠ

css 리셋을 안해줘서 그런가...훔..


쨋든...


간격을 다시 늘리기 위해서

#nav li {

 float:left;
 display:inline-block;

 margin-right:5px;  <--추가
 margin-bottom:10px;
 padding:0 15px;
 font:bold 14px/23px "돋움", dotum, "굴림",gulim;
 height:45px;
 line-height:45px;
 border-width:1px;
 text-align:center;
 text-decoration:none;
 background-color: #999;

...





최종적으로 li에서 가로로 정렬하기 위해서는 display:inline-block;를 쓰는 것 보다 float:left; 를 사용하는 게 수월하다..ㅋㅋㅋㅋㅋㅋ

굳이 float:left;를 쓰는데 display:inline-block; 쓸 필요는 없는 듯 빼도 결과는 똑같음


<!DOCTYPE html>
<html lang="ko">
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr" />
<meta http-equiv="content-language" content="ko" />
<meta name="viewpoint" content="winth=device-width, initial-scale=1.0, user-scaleable=no">
<title></title>
<style type="text/css">
li {list-style:none;}
#nav {
 margin:0;
 padding:0;
 *zoom:1;
}
#nav:after {
 content:'';
 content:none;
 clear:both;
 display:block;
}
#nav li {
 float:left;
 margin-right:5px;
 margin-bottom:10px;
 padding:0 15px;
 font:bold 14px/23px "돋움", dotum, "굴림",gulim;
 height:45px;
 line-height:45px;
 border-width:1px;
 text-align:center;
 text-decoration:none;
 background-color: #999;
 border-radius:5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 -khtml-border-radius: 5px;
 -o-border-radius: 5px;
 -ms-border-radius: 5px;
 color:#333;
}
#nav a{
 text-decoration:none;
 color:#fff; 
}
#nav li:link,
#nav li:visited {
 background-color: #ccc;
 border-radius:5px;
 border-width:1px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 -khtml-border-radius: 5px;
 -o-border-radius: 5px;
 -ms-border-radius: 5px;
 color:#333;
}

#nav li:hover,
#nav li:active {
 background-color: #f33f2a;
 border-radius:5px;
 border-width:1px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 -khtml-border-radius: 5px;
 -o-border-radius: 5px;
 -ms-border-radius: 5px;
 color:#fff;
}
</style>
</head>
<body>
<ul id="nav">
 <li><a href="http://malza.com">menu1</a></li>
 <li><a href="http://malza.com">menu2</a></li>
 <li><a href="http://malza.com">menu3</a></li>
 <li><a href="http://malza.com">menu4</a></li>
 <li><a href="http://malza.com">menu5</a></li>
</ul>
</body>
</html>




*혼자 메모형식으로 정리 한 것이니 틀린 부분은 지적해주시면 감사히 배움 받겠습니다 ^^;





반응형

'기타 웹스킬 > css' 카테고리의 다른 글

익스7에서 display:line-block;  (0) 2015.06.12
공유하기 링크
댓글