ul multi line

ul , li 태그를 이용해서 아래처럼 멀티 라인으로 표시 해보자.



ul  스타일에서 지정한 width를 넘어가면 다음 라인에서 표시한다.

ul width가 240px, li width가 80px이다. 
한줄에 3개씩만 표시 하였다.

box-sizing:border-box;     /* 박스 width 계산을 정확하게 하기위해 추가 */

<style>
ul {
    font-size:10pt;
    width:240px;
    padding:0px;
    margin:0px;
    border:1px solid;
    float:left;
}

ul li {
    list-style-type:none;
    width:80px;
    height: 30px;
    line-height: 30px;
    text-align:center;
    display:inline;
    padding-right:10px;
    padding-left:10px;
    margin:0px;
    box-sizing:border-box;
    border-right:1px solid green;
    float: left;
}

ul li:nth-child(3n) {
  border-right:0px;
}
</style>

body는 다음과 같다.

<body>
<h2>ul multi line</h2>
<ul>
    <li>January</li>
    <li>February</li>
    <li>March</li>
    <li>April</li>
    <li>May</li>
    <li>June</li>
    <li>July</li>
    <li>August</li>
</ul>
</body>

다운로드:  ul_multiline.html

팁) nth-child에 대해서

n번째 , 홀수, 짝수 자식 요에만 특정 스타일을 지정하고 싶을때 사용하는 선택자이다.

다음의 body가 있다.

<p>January</p>
<p>February</p>
<p>March</p>
<p>April</p>
<p>May</p>
<p>June</p>
<p>July</p>
<p>August</p>

스타일에서 3n 적용 : 3의 배수 요소 마다 적용된다.
p:nth-child(3n) {
  color: red;
}



스타일에서 3 적용 : 3번째 요소만 적용된다.
p:nth-child(3) {
  color: red;
}



스타일에서 odd 적용 : 홀수에만 적용한다.  짝수에만 적용 할때는 "even"을 사용한다.
p:nth-child(odd) {
  color: red;
}



스타일에서 (-n+3) 적용 : 처음부터 3번째까지 적용 할때는 "-n"을 앞에 넣으면 된다.
p:nth-child(-n+3) {
  color: red;
}



스타일에서 (3n+2)적용: 반복은 3n, 시작은 2번째부터 적용 한다.
p:nth-child(3n+2) {
  color: red;
}



주의 사항)
해당하는 태그에 다른 태그가 존재할 경우 적용이 정상적으로 되지 않는다.
이때는 nth-of-type, nth-last-of-type를 이용한다.

스타일에 nth-last-of-type 적용 : 아래는 마지막 3개에 적용하고 있다.
                                            nth-last-child는 정상적으로 적용 되지 않고 마지막 2개만 적용된다.
p:nth-last-of-type(-n+3) {
  color: red;
}



다운로드: nth_last_of_type.html

참고)
https://webisfree.com/2015-10-10/[css]-nth-child()-선택자에-대한-css-적용방법-홀수-및-짝수번째-요소-선택
http://html5around.com/wordpress/tutorials/css3-nth-child/
http://aboooks.tistory.com/319?category=516604