이거 이미지 가로정렬시키실수 있으신분 계신가요 ㅡㅡ

· 15년 전 · 3303 · 11

css파일
a.headmenu_login{display:block;   width:47px;  height:14px;  background:url(headmenu_login.gif) no-repeat;}
a:hover.headmenu_login{  background-position:0 -14px;}
a.headmenu_login span{display:none;}

a.headmenu_chuchun{display:block;   width:150px;  height:14px;  background:url(headmenu_chuchun.gif) no-repeat;}
a:hover.headmenu_chuchun{  background-position:0 -14px;}
a.headmenu_chuchun span{display:none;}

a.headmenu_deliv{display:block;   width:109px;  height:14px;  background:url(headmenu_deliv.gif) no-repeat;}
a:hover.headmenu_deliv{  background-position:0 -14px;}
a.headmenu_deliv span{display:none;}

a.headmenu_favorit{display:block;   width:84px;  height:14px;  background:url(headmenu_favorit.gif) no-repeat;}
a:hover.headmenu_favorit{  background-position:0 -14px;}
a.headmenu_favorit span{display:none;}

a.headmenu_jjim{display:block;   width:84px;  height:14px;  background:url(headmenu_jjim.gif) no-repeat;}
a:hover.headmenu_jjim{  background-position:0 -14px;}
a.headmenu_jjim span{display:none;}

a.headmenu_logout{display:block;   width:53px;  height:14px;  background:url(headmenu_logout.gif) no-repeat;}
a:hover.headmenu_logout{  background-position:0 -14px;}
a.headmenu_logout span{display:none;}

a.headmenu_mail{display:block;   width:47px;  height:14px;  background:url(headmenu_mail.gif) no-repeat;}
a:hover.headmenu_mail{  background-position:0 -14px;}
a.headmenu_mail span{display:none;}

a.headmenu_point{display:block;   width:50px;  height:14px;  background:url(headmenu_point.gif) no-repeat;}
a:hover.headmenu_point{  background-position:0 -14px;}
a.headmenu_point span{display:none;}

a.headmenu_regi{display:block;   width:54px;  height:14px;  background:url(headmenu_regi.gif) no-repeat;}
a:hover.headmenu_regi{  background-position:0 -14px;}
a.headmenu_regi span{display:none;}

a.headmenu_search{display:block;   width:87px;  height:14px;  background:url(headmenu_search.gif) no-repeat;}
a:hover.headmenu_search{  background-position:0 -14px;}
a.headmenu_search span{display:none;}



html파일
<a href="#" class="headmenu_login"><span>로그인</span></a>
<a href="#" class="headmenu_chuchun"><span>추천휴대폰</span></a>
<a href="#" class="headmenu_deliv"><span>추천휴대폰</span></a>
<a href="#" class="headmenu_favorit"><span>추천휴대폰</span></a>
<a href="#" class="headmenu_jjim"><span>추천휴대폰</span></a>
<a href="#" class="headmenu_logout"><span>추천휴대폰</span></a>
<a href="#" class="headmenu_mail"><span>추천휴대폰</span></a>
<a href="#" class="headmenu_point"><span>추천휴대폰</span></a>
<a href="#" class="headmenu_regi"><span>추천휴대폰</span></a>
<a href="#" class="headmenu_search"><span>추천휴대폰</span></a>

도대체 붙을 생각을 안하네요..가로로 ㅜㅜ

|

댓글 11개

display: block;을 display: inline;으로 해보세요
요건 안되네요 ^^;
style="float:left;"

http://sir.co.kr/bbs/tb.php/tip_css/466/b6518433b13eab14e7bb5774f06b33f1
참고하세요..
아직초보라 잘 이해가 안되지만 분석해 볼꼐요 감사합니다.
a.headmenu_point span{display:none;}
대신에
a.headmenu_point span{ visibility:hidden; }
로 쓰세요.

스크린 리더가 display:none; 부분은 안 읽어 준다고 하네요.
요건 적용은 안해봤어요... 좀따 적용해볼꼐요 ^^
틈이 있다면
<a ... </a><a ...
이렇게 해 보세요.
*^^* 요건 올리기 전에 해본팁.. 감사합니다.
메인 메뉴 부분은 ul, li도 같이 활용하시기 바랍니다.
앵커에 display: block;은 이미 주셨으니 float: left;만 해주시면 됩니다.

하지만 저런 방식의 CSS 작성은 일일히 엘리먼트마다 스타일을 주는 것과 다름이 없습니다.
감싸주는 요소가 필요하며 이러한 요소의 존재는 도움이 됩니다.
하위 엘리먼트는 상위 엘리먼트에 항상 귀속되는지요?
공부하다보니 어떤 것은 귀속 되는 듯 하고, 어떤 것은 아닌거 같고...;;
직접 해 보면 또 되는 듯 하고;;; 아리송합니다~~
감사합니다 앵커에 float:left;만 넣으니까 가로로 쫙 바뀌네요..
일일히 지정해 둔건 곳곳에 쓰여서(일괄적으로 한곳에 쓰일게 아니라서 ^^)

답변 감사합니다.

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기
🐛 버그신고