테스트 사이트 - 개발 중인 베타 버전입니다

default.css 란의 ul li의 style 채택완료

예봄 4년 전 조회 4,263

특정 페이지의 인덱스.php 내에서 

 

<div id="cf_side_title" class="ajax-link">
    <ul id="cf_side_title">
        <il><a href="?side=1" class='ui-btn '>0차</a></li>
        <li><a href="?side=2" class='ui-btn '>1차</a></li>
        <li><a href="?side=3" class='ui-btn '>2차</a></li>
    </ul>
</div>

 

를 추가하고

 

해당하는 css페이지인 default.css 의

ul,li    { margin: 0; padding: 0; } 항목을

 

#cf_side_title        { overflow: hidden; padding-bottom: 20px; }
#cf_side_title ul    { display: block; overflow: hidden; }
#cf_side_title li    { float: left; }

 

로 변경했습니다. 이를 통해 ui 버튼을 가로 정렬하는 것에는 성공하였으나

- 중앙으로 당기지를 못하였고 (가로 정렬 상태에서 왼쪽에 붙어있어요) 

ㄴ text-align:center; 를 #cf_side_title 에 넣었더니 0차 버튼만 중앙 정렬에 걸리더라고요. (1차, 2차 li는 왼쪽에 계속 붙어있음)

- 더불어 0차 1차 2차 순으로 나와야 하는 버튼이 1차 2차 0차 순으로 순서가 변경되었는데 (인덱스 값은 바뀌지 않은 상태로)

 

어떻게 해결해야 할까요?? 

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

답변 2개

채택된 답변
+20 포인트
e
4년 전

#cf_side_title li    { float: left; text-align:center; }

순서가 바뀐것은 url 이 있어야 도와드릴수 있겠네요..

다른 css 의 영향을 받는것 같습니다.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

예봄
4년 전
li 값을 그대로 수정해보았는데

0차
1차 2차 순으로 배열이 되네요.......ㅠㅠ... 그래도 감사합니다 한 번 다시 찾아봐야겠어요.

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

s
sinbi Expert
4년 전

정렬/위치 관련 주요 속성이니, 참고해 작업해 보세요.

https://homzzang.com/b/css-256

 

그래도 해결 안 되면

증상 있는 URL 주소와 구현코자 하는 상태의 이미지를 올려보세요.

로그인 후 평가할 수 있습니다

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

답변을 작성하려면 로그인이 필요합니다.

로그인