CSS 관련하여 질문 하나 드립니다.
글쓴이: haeoun / 작성시간: 월, 2016/01/25 - 6:20오후
큰
- 폼안에서
- 를 3개넣는데
그 각각의 - 는
다시 가로로 배열된 - 2개를 가진
- 이 한번더 들어있습니다.
이렇게 해서 3행 2열 의 레이아웃이 생겨야 하는데
제가 float에 대한 확실한 개념이 없어서 그런지 뒤죽 박죽이네요.물론 div로 하면 벌써 해냇지만
이렇게 ul과 li로만 되어있는 형식에서 구현해야합니다.
display:inline도 사용하지 않고요.
어떻게 구현해야할지 도움좀 부탁드려요~!!<head> <meta charset="utf-8"> <style type="text/css"> #ool{ border: 1px solid red; } .inner { border: 1px solid blue; } .inner li{ float: left; } .inner li:nth-child(odd){ } .inner li:nth-child(even){ margin-left: 50px; } </style> </head> <body> <div> <ul id='ool'> <li> <ul class="inner"> <li>1-1</li> <li>1-2</li> </ul> </li> <li> <ul class="inner"> <li>2-1</li> <li>2-2</li> </ul> </li> <li> <ul class="inner"> <li>3-1</li> <li>3-2</li> </ul> </li> </ul> </div> </body>
-->
Forums:
대충 이렇게 나오는데요.
다음 블로그 웹 에디터에 해당 HTML 을 복사한 소스를 본 내용
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>Pseudo Class - :nth-child</title> </head> <body> <p><br> </p><ul id="ool"><br> <li><br> <ul class="inner"><br> <li>1-1<br> </li><li>1-2<br></li></ul><br><br> </li><li><br> <ul class="inner"><br> <li>2-1<br> </li><li>2-2<br></li></ul><br><br> </li><li><br> <ul class="inner"><br> <li>3-1<br> </li><li>3-2<br></li></ul><br></li></ul><p><br></p> </body> </html>style 을 추가한 경우의 코드
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>Pseudo Class - :nth-child</title> <style> #ool{ border: 1px solid red; } .inner { border: 1px solid blue; } .inner li{ float: left; } .inner li:nth-child(odd){ } .inner li:nth-child(even){ margin-left: 50px; } </style> </head> <body> <p><br> </p><ul id="ool"><br> <li><br> <ul class="inner"><br> <li>1-1<br> </li><li>1-2<br></li></ul><br><br> </li><li><br> <ul class="inner"><br> <li>2-1<br> </li><li>2-2<br></li></ul><br><br> </li><li><br> <ul class="inner"><br> <li>3-1<br> </li><li>3-2<br></li></ul><br></li></ul><p><br></p> </body> </html>----------------------------------------------------------------------------
젊음'은 모든것을 가능하게 만든다.
매일 1억명이 사용하는 프로그램을 함께 만들어보고 싶습니다.
정규 근로 시간을 지키는. 야근 없는 회사와 거래합니다.
각 분야별. 좋은 책'이나 사이트' 블로그' 링크 소개 받습니다. shintx@naver.com
댓글 달기