2017-02-07

이곳은 css관련 유용한 팁이나 필자가 자주 까먹는 것들을 적어 놓는 공간으로 활용할 예정이다.

<style>
.div1{
	 border:2px solid black;
}

.div1 ul{
	margin:0;
	padding:0;
}

.div1 ul li{
    list-style-type: none;
    float:left;
    border:1px solid red;
}

.div2{
	 border:2px solid black;
}

.div2 ul{
	margin:0;
	padding:0;
}

.div2 ul li{
    list-style-type: none;
    display: inline-block;
    border:1px solid red;
}

</style>

<div class="div1">
	<ul>
		<li>111111111</li>
		<li>222222222</li>
		<li>333333333</li>
	</ul>
</div>
<br><br>
<div class="div2">
	<ul>
		<li>111111111</li>
		<li>222222222</li><li>333333333</li>
	</ul>
</div>
<br><br>
<div class="div1 row">
	<ul>
		<li>111111111</li>
		<li>222222222</li><li>333333333</li>
	</ul>
</div>

div안에 ul태그를 썼을때 li를 float:left로 정렬할 경우 ul을 무시해 버리게 되는데, 그럴대는 위와 같이 display:inline-block으로 해결 가능 하다.
참고로 inline-block안에서는 li를 공백 없이 붙여 써야 표시될때도 붙어서 보여진다.
그 외에 이점을 해결하려면 bootstrap의 row로 명시된 클래스를 사용하면 되긴 하는데, row에 정의된 다른 속성들 때문에 원하는 데로 쓰는데는 조금 불편 할수도 있다.