저도 질문 하나 :: CSS 코딩 중 DIV에서의 List 정렬에 관한 문제입니다.
찬솔
CSS에서 다음과 같이 속성을 주고 DIV 레이어를 만들었습니다.하지만 right DIV에서 정렬이 제대로 되지 않습니다. 오른쪽으로 정렬하려고 하는데 생각만큼 잘 되지 않네요.
CSS 파일입니다 --------------------------------------------#header {width:755px;height:30px;margin:5px 5px 0px 5px;text-align:center;border:1px solid black;}#title {width:300px;height:20px;display:inline;float:left;margin-top:5px;margin-right:5px;margin-bottom:0px;margin-left:5px;text-align:left;border:1px solid black;}#login {width:435px;height:20px;display:inline;float:right;margin-top:5px;margin-right:5px;margin-bottom:0px;margin-left:0px;text-align:right;border:1px solid black;}#container {width:755px;height:390px;margin-top:5px;margin-right:5px;margin-bottom:5px;margin-left:5px;border:1px solid black;overflow:hidden;}#left {width:150px;height:380px;display:inline;float:left;margin-top:5px;margin-right:0px;margin-bottom:5px;margin-left:5px;border:1px solid black;}#vertical {width:25px;height:380px;display:inline;float:left;margin-top:5px;margin-right:5px;margin-bottom:5px;margin-left:5px;border:1px solid black;overflow:hidden;}#center {width:425px;height:380px;display:inline;float:left;margin-top:5px;margin-right:5px;margin-bottom:5px;margin-left:0px;border:1px solid black;}#content {width:415px;height:365px;margin-top:5px;margin-right:5px;margin-bottom:5px;margin-left:5px;/*border:1px solid black;*/overflow:auto;overflow-x:hidden;}#right {width:120px;height:380px;display:inline;float:right;text-align:left;margin-top:5px;margin-right:5px;margin-bottom:5px;margin-left:0px;border:1px solid black;}#menu {margin-top:5px; ul { padding:0px; } li { list-style-type:none; display:inline; float:left; margin-bottom:2px; padding-left:4px; padding-top:6px; border: 1px solid black; font-family: dotum; font-size:12px; width:80px; height:22px; }}#footer {width:755px;height:30px;margin-top:5px;margin-right:5px;margin-bottom:5px;margin-left:5px;border:1px solid black;}#tail {width:745px;height:20px;margin-top:5px;margin-right:5px;margin-bottom:5px;margin-left:5px;border:1px solid black;}
HTML DIV 레이어를 적용한 파일 입니다 --------------------------------------------link rel=stylesheet href=css/style.css type=text/cssdiv id=header div id=title /div div id=login /div/divdiv id=container div id=left /div div id=vertical /div div id=center div id=content 컨텐츠 /div /div div id=right div id=menu ul li리스트 1/li li리스트 2/li li리스트 3/li li리스트 4/li /ul /div /div/divdiv id=footer div id=tail /div/div
어떻게 하면 오른쪽으로 졍렬윷?졍렬이 될까요? 아니면 웹브라우저의 버그? 원인을 알고 싶습니다.
-
두나 2025-04-18
...리스트 스타일이 40xp을 차지하고 있었습니다 -ㅅ-
(자기가 질문해놓고 자기가 답하다니...) -
주인님 2025-04-18
리스트 스타일을 숨겼는데도 리스트 여백이 그대로 남아있었는데
그게 문제가 됐던거라서...
마진이랑 패딩값을 0으로 주면 우측정렬한것처럼 되버리더라고요.
결국 div 로 바꿔서 for로 돌렸습니다. -
꽃님이 2025-04-18
#menu{
margin-top: 5px
ul{
padding: 0px;
}
li{
padding: 0;
margin: 0;
}
}
이렇게 css를 쓰는 방법이 있는건지...
아니면 올리실때 잘못 쓰신건지;;; -
비예 2025-04-18
(.....코딩 자량이냐)
-
핫파랑 2025-04-18
크롬으로 살펴봤더니 여백값이 40px 더 나오길래 -40px 로 여백을 없애버리기는 했지만
역시 왜 그런지 궁금하네요.