div 안의 ul태그 li태그

DIV 태그 안에

DIV 태그 안에

UL 태그 안에

LI 태그를 쓰면

리스트들이 DIV 태그를 벗어나는 경우가 있다.

IE에서는 괜찮은데 firefox 에서는 확실히 벗어난다.

아래의 코드를 보자..

div {
      border: 1px solid black;
      width:200px;
}
  ul {
      list-style:none; 
      margin:0; 
      padding:0;
  }
  li{
      margin: 0 0 0 0;
      padding: 0 0 0 0;
      border: 0;
      float:left;
  }

<div>
    <div>

        <ul>
            <li>안의내용</li>
            <li>안의내용1</li>
            <li>안의내용2</li>
        </ul>
</div>

</div>

위와 같이 코딩을 하고 브라우저 창에서 보면 div는 검은색은 1px 의 두께의 선이 생기지만

"안의내용"은 div 바깥에 생성이 된다.

이것을 해결하려면 마지막의 li 태그에 float:left; 속성을 지워주면 된다.
하지만 li 태그에 class로 이름을 줘서 또 나눠주기도 불편하고
프로그래밍으로 리스트를 뽑아줄때 마지막꺼만 속성을 바꿔주기도 뭐하다...

고민고민하다가 해결책을 발견했다.

display:inline; 속성은 레이어에 태그를 붙이는 역활을 한다.

li 태그 속성에 float:left 대신 display:inline; 속성을 써주면 간단하게 해결할 수 있다.

난 천재?

------------------------------------------------------------------------------------------
추가.. display:inline; 속성을 줬을때

<li>
    <div>첫번째</div>
    <div>두번째</div>
</li>

이렇게 했을시에 첫번째의 div 태그 밑에 두번째 div 태그가 온다...
그러니까 줄바꿈이 되서 보여진다.

이것을 해결하기 위해

ul 태그에 CSS 속성으로

clear:both; 속성을 넣어주자..

그리고 display:inline; 속성을 float:left; 속성을 다시 바꿔줘야 한다.

이것때문에 5시간 삽질했네 -_-..

쳇..