ul li 정렬 문제
로와
네비게이션 만들때 test li ul은 positon으로 주고 float:left 주는데요
사진에서 처럼 왼쪽 정렬이 아니 오른쪽 정렬을 하고 싶습니다.
text-align:right 으로는 li가 정렬이 안되는데요
흠......
ul#test li ul li{float:right;}
ul id=test
li id=top-menu1a href=# id=top-menu-head1img src=../images/common/mb1_1.gif alt=민원의문 //a
ul id=top-sub-menu1
li id=top-1-1 class=lefta href=#img src=images/civilaffairs/m1_1_1.gif alt=통관전자민원 //a/li
li id=top-1-2 class=linea href=#img src=images/civilaffairs/m1_1_2.gif alt=민원업무서식 //a/li
li id=top-1-3 class=linea href=#img src=images/civilaffairs/m1_1_3.gif alt=민원상담 //a/li
li id=top-1-4 class=linea href=#img src=images/civilaffairs/m1_1_4.gif alt=파트너상담 //a/li
li id=top-1-5 class=righta href=#img src=images/civilaffairs/m1_1_5.gif alt=세관서비스헌장 //a/li
li class=point_arrow position/li
/ul
/li
li id=top-menu2a href=# id=top-menu-head2img src=../images/common/mb2_1.gif alt=국민의문 //a
ul id=top-sub-menu2
li id=top-2-1 class=lefta href=#img src=images/civilaffairs/m1_1_1.gif alt=통관전자민원 //a/li
li id=top-2-2 class=linea href=#img src=images/civilaffairs/m1_1_2.gif alt=민원업무서식 //a/li
li id=top-2-3 class=linea href=#img src=images/civilaffairs/m1_1_3.gif alt=민원상담 //a/li
li id=top-2-4 class=linea href=#img src=images/civilaffairs/m1_1_4.gif alt=파트너상담 //a/li
li id=top-2-5 class=linea href=#img src=images/civilaffairs/m1_1_5.gif alt=세관서비스헌장 //a/li
li id=top-2-6 class=linea href=#img src=images/civilaffairs/m1_1_5.gif alt=세관서비스헌장 //a/li
li id=top-2-7 class=righta href=#img src=images/civilaffairs/m1_1_5.gif alt=세관서비스헌장 //a/li
li class=point_arrow position/li
/ul
/li
/ulul#test {position:relative;width:500px;border:1px solid black;}
ul#test li{float:left;display:inline;padding-right:15px;border:1px solid red;}
ul#test li a{display:block;}
ul#test li ul{clear:left;float:right;text-align:right;border:1px solid blue;}
ul#test li ul li{}
ul#test li ul#top-sub-menu1{position：absolute;left:0;top:30px;width:550px;}
ul#test li ul#top-sub-menu2{display：none;}
ul#test {position:relative;width:500px;border:1px solid black;}
ul#test li{float:left;display:inline;padding-right:15px;border:1px solid red;}
ul#test li a{display:block;}
ul#test li ul{clear:left;float:right;text-align:right;border:1px solid blue;}
ul#test li ul li{clear:left;float:right;}
ul#test li ul#t li ul#top-sub-menu1{position：absolute;left:0;top:30px;width:550px;}
ul#test li ul#top-sub-menu2{display：none;}
ul li ul li에 float:right를 주었더니 저렇게 li 순서가 뒤바뀌어 버리더군요
ㅡㅡ..;;
원래 저랫나??순서가 뒤바뀌지 않고 오른쪽 정렬할수 없나요???
-
빈길
style type=\text/css\
\tdiv { width: 800px; background: red; }
\tul { float: right;}
\tul li { float: left; }
/style
div
\tul
\t\tli1/li
\t\tli2/li
\t\tli3/li
\t\tli4/li
\t/ul
/div
요딴 식으로 하시면 됩니다. ul을 float: right로 li를 float: left;로~ -
여자
강수다님이 원하시는 방법으로 하시는 경우에는 css코드와 html코드가 지저분해 질 수 있습니다.
float:right의 속성은 순서가 가장앞의 텍스트가 오른쪽부터 정렬이 됩니다. li에 클래스값을 주어 작업 할 경우에는 공통 요소들을 다 분리해야 하는 작업이 있으므로 번거롭습니다. 혹 하시다 안되시면 메일로 컨텐츠 부분 작업하신거 보내주세요. 도움이 되셨으면 합니다. -
던컨
ul li에 float:right하면 순서가 뒤바뀌는거죠?순서가 뒤바뀌지만 않으면 되는데요..
-
블1랙캣
답변감사합니다.하지만 마크업을 바꾸지 않는 상태에서 가능하지 않은건지..?
제가 div를 쓰지 않는 이유는 전체다 li에 right값을 주는게 아니라 각각으로 줘야하는 상황이라.
수다님 방법을 쓰지 않는거여서,,어떤건 left 되고 어떤건 right되야 하는 상황인지라..
저 마크업에서 가능하지 못한건가요? -
희미한눈물
초보적인 방법으로 ul li ul에 넓이값을 주시고 float:right하신 후에 ul li ul에 float:lef 하면 될까요? 만약 안되시면 마크업을 다르게 하셔야 할 것 같아요..