이런 화면을 구성하고싶은데요..
본문
안녕하세요
.second_row{
padding:60px 168px;
border:2px solid #eee;
}
.second_row ul li{
width:32px;
height:32px;
border:3px solid #eee;
background-color:#334768;
border-radius:50%;
position: relative;
}
.list li:after{
content:'';
position: absolute;
background-color: gray;
}
.list li:after{
left: 100%;
top: 50%;
width: 200px;
height: 1px;
}
<div class="second_row">
<div class="list">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
요런식으로 구조화를했는데요..
display flex를 써서 해볼까도생각해봣지만 이거 익스플로러에서 제대로 작동안하는거같아서요 ㅠ
방법은그럼 position이나 float 바께 없는거같은데 혹시 좋은방법이없을까요?
현재 나온 상황입니다..
답변 2
리스트에
display:inline-block;
은 어떠신가요?
네 한번해보겠습니다!
그이후에 마진이나 패딩값으로 조절하는거겟죠
그렇죵^^
float 로 하시면 낮은 브라우저에서도 다 동작합니다.
background 부분을 본인 걸로 교체해서 쓰시면 될듯합니다.
<style type='text/css'>
/* reset */
ul,li{list-style:none;padding:0;margin:0;}
.wrap_step{position:relative;width:600px;height:100px;background:#333;}
.wrap_step{}
.step{width:100%;}
.step:after {content:" "; display:block; clear:both;}
.step li{float:left;width:25%;text-align:center;height:100px}
.stepActive01{background:green;}
</style>
<div class='wrap_step'>
<ul class='step'>
<li class='stepActive01'>
step1
</li>
<li>
step2
</li>
<li>
step3
</li>
<li>
step4
</li>
</ul>
</div>
ㅜㅠ 뭔가 이상해요 해봣는데요 답변감사합니다
