같은 폭의 수직 버튼

두 개의 수직 정렬 버튼입니다. 나는 너비가 동일 할 필요가있다. 나는 그렇지 않다 :같은 폭의 수직 버튼

어떤 크기로자를 것이다;
어떤 텍스트 버튼이 될까요? (따라서 픽셀 너비는 사용할 수 없습니다);
너비는 무엇입니까?

버튼은 왼쪽에 있어야합니다. 버튼의 텍스트는 가운데 맞춤이어야합니다. 내가 아름다움을 가지지 않기 때문에 100 % 너비를 사용할 수 없다. :)

나는 flexbox를 사용할 수없고 단추에 너비를 지정할 수 없다. 그리고 순수 CSS에 대한 멋진 해결책이 될 것입니다.

IE8 +

.wrap{ 
 
    width: 100%; 
 
    border: 1px solid red; 
 
} 
 

 
.btn{ 
 
    height 40px; 
 
    background-color: tomato; 
 
    margin-bottom: 10px; 
 
    display: block; 
 
}

<div class="wrap"> 
 
    <button class="btn">small button</button> 
 
    <button class="btn">super long button</button> 
 
</div>

출처

2017-01-17 frontEndNoob

"100 % 너비를 사용할 수 없으므로 아름다움을 내지 못할 것"이라고 설명해 주시겠습니까? 고마워 –

포장이 1000px이면 100 % 너비의 버튼도 1000px가됩니다. 그것은 아름다움 디자인이 아니에요 – frontEndNoob

아 - 당신은 디자인 관점에서 좋은, 공정한 코멘트를하지 않는 것을 의미합니다 :) @ Pete 대답이 당신의 문제를 해결합니까? 그렇다면, 투표 화살표 아래에있는 체크를 사용하여 그의 대답을 수락하십시오. –

그냥 컨테이너 인라인 블록 다음 버튼을 100 % 너비가 가장 큰 버튼의 폭 걸릴 것입니다 그런 식으로합니다

.wrap{ 
 
    display: inline-block; 
 
    border: 1px solid red; 
 
} 
 

 
.btn{ 
 
    height 40px; 
 
    background-color: tomato; 
 
    margin-bottom: 10px; 
 
    display: block; 
 
    width:100%; 
 
}

<div class="wrap"> 
 
    <button class="btn">small button</button> 
 
    <button class="btn">super long button</button> 
 
</div>

을

출처

2017-01-17 09:24:30 Pete

예, 해결책이 있습니다. 하지만 왜 작동합니까? – frontEndNoob

display inline-block은 내부의 가장 큰 항목의 너비를 차지합니다. 따라서 내부 요소에 100 %의 너비를 지정하면 컨테이너 내에서 가장 큰 요소의 너비가 모두 0이됩니다. – Pete

괜찮음 해결책을 참조하십시오. – frontEndNoob

-1

컨테이너 div에 inline-block을 사용하십시오!

출처

2017-01-17 09:25:29

이것은 실제로 대답이 아닙니다. 현재 상태에서는 주석으로 더 나을 것입니다. 자세한 내용과 코드 예제를 추가하십시오. –

답변

관련 문제