<ul>, <li> 의 float 이용한 목록 CSS 질문 > 그누4 질문답변

그누4 질문답변

그누보드4 관련 질문은 QA 로 이전됩니다. QA 그누보드4 바로가기
기존 게시물은 열람만 가능합니다.

<ul>, <li> 의 float 이용한 목록 CSS 질문 정보

<ul>, <li> 의 float 이용한 목록 CSS 질문

본문

 
<ul>
  <li class="first"> A <li>
  <li class="second"> B <li>
  <li class="third"> C <li>
</ul>

<style>
ul{width:100%;list-style:none;overflow:auto;}
ul li{float:left;}
ul li.first{width:100px}
ul li.second{width:120px;}
</style>


위와 같이 목록을 작성했다고 했을 때,
ul li.third 에는 width 를 주지 않고 들어가는 내용이 길면...
다음 라인으로 li 가 넘어가 버리는데...

내용이 길어도 .third 가 .first, .second 와 함께 같은 라인에 보이게 할 수 있을까요? (javascript 는 사용하지 않고 순수 CSS로..)
  • 복사

댓글 전체

port 홈페이지 자기소개 아이디로 검색 회원게시물 13.07.06 10:45:22
픽셀로는 방법이 없을 듯 하고요.
대략적으로
<style>
ul{width:100%;list-style:none}
ul li{float:left;}
ul li.first{width:10%}
ul li.second{width:10%;}
ul li.third{width:75%;white-space:nowrap}
</style>
이런식으로 하니 되긴 하는데.. li부분을 넘어서는 방식이라서 좋은 방법은 아니라고 보여집니다.
새벽비 자기소개 아이디로 검색 회원게시물 13.07.07 04:47:11
<style>
ul{width:100%;list-style:none;overflow:hidden}
ul li{float:left;}
ul li.first{width:100px}
ul li.second{width:120px;}
ul li.third{width:100%;margin-right:-220px;}
ul li.third span{diaplay:block;padding:0 220px 0 0;word-break:break-all}
</style>
<ul>
<li class="first">내용</li>
<li class="second">내용</li>
<li class="third"><span>내용</span></li>
</ul>
byfun 홈페이지 자기소개 아이디로 검색 회원게시물 13.07.07 21:45:28
아 .. 요 방법 될것 같은데.. 지금 제가 적용한곳에는 안되네요.
따로 시험을 좀 해봐야 할 것 같습니다.

일단 .third 를 absolute 를 하고 margin-left 를 줘서 했습니다...만
요 방법을 좀 더 테스트 해봐야 겠습니다 감사합니다
목록
문의 PC 버전
© SIRSOFT
현재 페이지 제일 처음으로