진행률 표시 줄 CSS 100 % 너비

이 템플릿 http://jsfiddle.net/dantetemp/V4uUk/8/을 기반으로 사용자 정의 진행률 표시 줄을 만들려고합니다. 누군가가 창의 너비를 100 %로 만드는 방법을 알고 있으며 같은 시간에 모든 요소와 텍스트를 멋지게 정렬합니다.진행률 표시 줄 CSS 100 % 너비

너에게 리터 너비를 지정해도 나에게 좋지 않습니다.이 방법으로 구멍 진행률 막대를 100 % 너비로 사용할 수 없기 때문입니다.

li { width: 30%; }

그리고 여기에 관련된 다른 질문입니다. 누군가가 widow 너비를 줄이면 레이아웃을 느슨하게하지 않으므로 어떻게 홀 진행 바의 최소 너비를 설정할 수 있습니까?

대단히 감사드립니다 !!

출처

2013-07-25 alexey m

jsfiddle css는 진짜 CSS가 아니며, 전 처리기가 필요합니다. – Oriol

"진행률 표시 줄"이 무엇인지 모릅니다. 이 템플릿은 이동 경로를 보여줍니다. – MarioDS

내가 보통 뭔가를 특정 너비로 만들고 싶을 때 div로 넣습니다. (예를 들어, 당신을 위해 일을하거나하지 있을지 잘 모르겠어요) 그래서 당신은 당신의 CSS에 다음

<div id steps> 
<ol class="steps"> 
    <li class="step1"><span>Estimate</span> 

    </li> 
    <li class="step2 current"><span>Delivery</span> 

    </li> 
    <li class="step3"><span>Payment</span> 

    </li> 
</ol> 
</div>

하고있을 수

#steps { 
width:100%; 
}

그것은 일반적으로 나를 위해 작동하지만 다음 다시 내 코드에 뭔가 다른 것이 있기 때문에 효과가있을 수 있습니다. 바로 작동하지 않으면 내가 사용하는 코드를 추가 할 수 있습니다.

출처

2013-07-25 10:26:44

먼저 사용하도록했습니다 :

이

*, *:after, *:before { 
outline: none; 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
padding:0; 
margin:0; 
}

다음 사용자 CSS에서 CALC 속성

width: -webkit-calc(33.3333333% -76px); 
    width: -moz-calc(33.3333333% -76px); 
    width: calc(33.3333333% -76px);

데모 여기 http://jsfiddle.net/V4uUk/9/ 이 떠 넣어 각 리튬에 남아 잊지 마세요 수

float:left;

너비는

0123입니다.

min-width:600px;

이 도움이 되었기를 바랍니다.

출처

2013-07-25 10:29:20

진행률 표시 줄 CSS 100 % 너비

답변

관련 문제