옆에 두 개의 필드 세트를 나란히 놓기 (나란히)

나는 당신의 도움이 필요합니다.옆에 두 개의 필드 세트를 나란히 놓기 (나란히)

제 아이디어는 페이지의 너비가 100 %이고 인접한 두 개의 필드 세트를 페이지에 두는 것입니다. 선택한 브라우저는 (IE10)

바로 지금은 그들이 원하는 것을 따르지 않는 것 같습니다.

지금 현재 로선 둘 다 서로 위에 겹쳐 있습니다.

필드 세트를 어떻게 나란히 정렬 할 수 있습니까? 여기 enter image description here

를 마크 업입니다 :

여기에 무슨 일이 일어나고 있는지에 대한 간단한 그림입니다

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 

<style type='text/css'> 
fieldset { 
    padding: 3px; 
    width: 300px; 
    float: left; 
} 
#field1 { 
    width: 70%; 
} 
#field2 { 
    width: 30%; 
} 
label { 
    float:left; 
    font-weight:bold; 
} 
input { 
    width: 100%; 
    box-sizing:border-box; 
} 
</style> 

</head> 
<body> 
    <fieldset id="field1"> 
     <legend>Message Centre</legend> 
     <input type="text"> 
    </fieldset> 
    <fieldset id="field2"> 
     <legend>File Number</legend> 
     <input type="text"> 
    </fieldset> 

</body> 

</html>

출처

2014-04-04 Jason Kelly

이 상당히 유사한 문제입니다,이 게시물을 참조 : http://stackoverflow.com/questions/22696467/form-w 두 번째 열/22696576 # 22696576 – Pete

당신은 매우 가깝습니다.

테두리 상자는 친구이며 길을가는 기본 브라우저 스타일이 있습니다. 필드 집합뿐만 아니라 입력에 테두리 상자를 추가했습니다. 패딩이 있었고 필드 세트에 기본 여백과 테두리가 있었기 때문에 백분율이 100 %를 초과했습니다. 기본 마진을 제거하고, 필드 셋에 경계 상자를 추가하면 이러한 문제를 해결

fieldset, input { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 
fieldset { 
    margin:0; 
}

http://jsfiddle.net/U46V7/

국경 박스는 폭 계산의에 패딩 및 테두리를 포함하는 폭 속성을 변경합니다. 따라서 이전에 # field1이 왼쪽과 오른쪽 + 1px 경계에서 70 % 너비 + 3px 여백으로 설정된 경우 box-sizing:border-box;을 추가하여 테두리와 패딩을 포함하는 70 % 너비를 설정합니다.

출처

2014-04-04 17:19:40

그래, 나도 거의 동일합니다 : p

상자 크기 조정이 해결책입니다!

FIELDSET : http://jsfiddle.net/8dSnw/5/

input{ 
    float: left; 
    width: 50%; 
    display: inline-block; 
    box-sizing: border-box; 
}

만 입력 :

http://jsfiddle.net/8dSnw/3/

출처

2014-04-04 17:24:13 Ploppy

삽입 한 테이블에 두 개의 필드 셋 :

<table> <td> Fieldset1 </td> <td> Fieldset2 </td></table>.

출처

2014-09-04 14:14:20

또한 두 개의 ''을''에 캡슐화해야합니다. – RevanProdigalKnight

옆에 두 개의 필드 세트를 나란히 놓기 (나란히)

답변

관련 문제