[css] 양쪽 정렬 버튼

[출처] http://html.nhncorp.com/uio_factory/ui_pattern/button/3

양쪽 정렬 버튼입니다. 버튼을 양쪽정렬 해야하는 경우 활용할 수 있습니다.

CSS

/* UI Object */
/* Common */
body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select{margin:0;padding:0}
body,input,textarea,select,button,table{font-family:'돋움',Dotum,AppleGothic,sans-serif;font-size:12px}
img,fieldset{border:0}
ul,ol{list-style:none}
em,address{font-style:normal}
a{text-decoration:none}
a:hover,a:active,a:focus{text-decoration:underline}

.btn_both{overflow:hidden;clear:both;width:100%}
.btn_both .fl{float:left}
.btn_both .fr{float:right}
/* //UI Object */

HTML

<!-- UI Object -->

<div class="btn_both">

<div class="fl">

<a href="#"><img src="http://static.naver.com/kin/09renewal/btn_select_all.gif" width="52" height="20" alt="전체선택"></a>

</div>

<div class="fr">

<a href="#"><img src="http://static.naver.com/kin/09renewal/btn_shifting.gif" width="56" height="30" alt="이동"></a>

<a href="#"><img src="http://static.naver.com/kin/09renewal/btn_delete2.gif" width="56" height="30" alt="삭제"></a>

</div>

</div>

<!-- //UI Object -->