본문 바로가기

DEVELOP

[publishing] display: flex로 list 가변 처리

728x90

<ul class="exhi-btn-list">
	<li><a href="javascript:;" class="exhi-btn coex on">tab111</a></li>
	<li><a href="javascript:;" class="exhi-btn kintex on">tab22</a></li>
	<li><a href="javascript:;" class="exhi-btn suwon on">tab33333</a></li>
	<li><a href="javascript:;" class="exhi-btn songdo on">tab4</a></li>
</ul>
.exhi-btn-list {
    display: flex;
    justify-content: space-between;
    padding-bottom: 2.7%;
}
.exhi-btn-list li {
    flex-grow: 1;
    text-align: center;
    overflow: hidden;
}
.exhi-btn {
    display: inline-block;
    padding: 8px 10px;
    border-radius: 20px;
    font-size: 1.3rem;
    font-weight: 700;
}
.exhi-btn.coex {
    border: 1px solid #ec008c;
    color: #ec008c;
}
.exhi-btn.kintex {
	border: 1px solid #3e7dc0;
	color: #3e7dc0;
}
.exhi-btn.suwon {
	border: 1px solid #fc6b00;
	color: #fc6b00;
}
.exhi-btn.songdo {
	border: 1px solid #19d3c5;
	color: #19d3c5;
}
.exhi-btn.coex.on {
	background-color: #ec008c;
	color: #fff;
}
.exhi-btn.kintex.on {
    background-color: #3e7dc0;
    color: #fff;
}
.exhi-btn.suwon.on {
	background-color: #fc6b00;
	color: #fff;
}
.exhi-btn.songdo.on {
	background-color: #19d3c5;
	color: #fff;
}