이런 화면을 구성하고싶은데요.. 채택완료
안녕하세요
.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; }
요런식으로 구조화를했는데요..
display flex를 써서 해볼까도생각해봣지만 이거 익스플로러에서 제대로 작동안하는거같아서요 ㅠ
방법은그럼 position이나 float 바께 없는거같은데 혹시 좋은방법이없을까요?
현재 나온 상황입니다..
답변 2개
답변에 대한 댓글 3개
댓글을 작성하려면 로그인이 필요합니다.
float 로 하시면 낮은 브라우저에서도 다 동작합니다.
background 부분을 본인 걸로 교체해서 쓰시면 될듯합니다.
</p>
<p> <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></p>
<p>답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인