CSS로 어떻게 설정을 해줘야 할지...몰라서 질문을 올려봅니다. 정보
CSS로 어떻게 설정을 해줘야 할지...몰라서 질문을 올려봅니다.
본문
#menu {border:1px solid #3a4152; border-bottom:1px solid #1b1f29; background:#434a5f;height:36px;}
#menu li {list-style:none;float:left;padding:10px;}
#menu li {font:normal 11px tahoma; color:#BABABA; text-align:center;}
#menu li.first {padding-left:15px;}
#menu li span {display:block; background:url('<?=$g4[path]?>/div.png') no-repeat right 50%}
----------------------------------------------------------------------------------------------
메뉴 옆에 | 이걸
#menu li span 으로 정의를 주려고 하는데...
생각처럼 잘 않되네요...
한번 조언 좀 부탁드려요.
댓글 전체
#menu li span { border-left: 1px solid #fff;}
#menu li.first span { border: none}
<ul id="menu"><li class="first"><span>메뉴1</span></li><li><span>메뉴2</span></li><li><span>메뉴3</span></li></ul>
#menu li.first span { border: none}
<ul id="menu"><li class="first"><span>메뉴1</span></li><li><span>메뉴2</span></li><li><span>메뉴3</span></li></ul>
border-left:1px solid #fff;를 사용하여 흰색으로 한줄 긋기는 테스트 확인해보았습니다. 감사합니다. 혹시 이미지로 처리는 않될까요...?
span에 가로 패딩값을 넣어야 하지 않을까요?
li:padding:10px 0
span:padding:0 10px;background:url('<?=$g4[path]?>/div.png') no-repeat right 0
li:padding:10px 0
span:padding:0 10px;background:url('<?=$g4[path]?>/div.png') no-repeat right 0
