<input> 및 <select> 폭

은 내가 input가 select에 새 항목을 추가하는 데 사용되는 select,하에 input 텍스트 상자를 넣어 노력하고 있어요. 자연스럽게, 나는 그들에게 같은 폭을 원한다. 그러나,이 (필요의 차이가 브라우저와 플랫폼마다 다를 수 있기 때문에 나는 다른 폭을 설정하지 않음) 작동하지 않습니다<input> 및 <select> 폭

이

select, input { 
min-width: 16em; 
}

텍스트 상자가 select 최대 6 개 픽셀 넓다.

http://forums.mozillazine.org/viewtopic.php?f=25&t=1555685에서의 포럼 게시물은 모두 크기 조정 내용 상자 (보다는 경계 박스 또는 다른 기본값을) 강요하는 것은 그들에게 동일을 할 것이다하는 것이 좋습니다.

select, input { 
min-width: 16em; 
box-sizing: content-box; 
-moz-box-sizing: content-box; 
}

내가 시도 할 생각 일 16em과 용기를 가지고 있었다 : 넓은 네 개의 픽셀이 두 픽셀만큼 select 폭을 증가, 조금 도움이되지만 텍스트 상자는 여전히 너비가 동일하고 두 자손을 width: 100%;으로 설정하십시오. 불행하게도, 그 작동하지 않았다 중 하나

내가 그들을 같은 폭 만들기 위해 노력하고 있습니다 다른 수정? 현재 Darklooks GTK + 테마를 사용하여 Ubuntu 11.04의 Firefox 4.0b7에서 테스트 중입니다. 물론 모든 곳에서 똑같이 작동하는 솔루션을 원합니다.

출처

2010-12-04 Delan Azabani

당신이 display: -moz-groupbox;

라이브 예를 추가 할 수 있습니다 충분히 재미있게 http://jsbin.com/alixi5

출처

2010-12-04 10:19:37 Sotiris

감사! –

@Delan Azabani welcome :) – Sotiris

원하는 폭으로 div 안에 넣고 선택 및 입력에 100 % 너비를 지정하십시오.

편집 다음 코드는 내 컴퓨터 ^{TM 작동}

<div style="width: 400px"> <select style="width:100%" multiple="multiple"> <option>Value1</option> <option>Value2</option> <option>Value3</option> <option>Value4</option> </select> <input type="text" style="width:100%">