테이블이 아닌 CSS 폼 2011

3 개의 텍스트 상자가 서로 인접 해 있거나 (전화 번호와 같은) 또는 텍스트 상자 옆에있는 드롭 다운 목록과 같은 스나그를 치면 양식 스타일에 CSS를 사용하지 않았습니다. 나는 좋은 ol 'TABLES없이 스타일을 만들 수있는 확실한 방법을 찾지 못했습니다.테이블이 아닌 CSS 폼 2011

양식 스타일링을 위해 CSS로 돌아갈 생각이 있습니다. 모르겠다.

자막이 필드의 위쪽이나 왼쪽에있는 것이 더 유용한 지 여부.
몇 가지 인접한 양식 요소로도 멋지게 배치되도록 사물의 스타일을 지정하는 방법.

참고 문헌? 아직도 파이프 꿈인가?

출처

2011-01-04 Caveatrob

그래서 여러분은 플로트 또는 박스 모델이 어떻게 작동하는지 모르십니까? – rxgx

서식을 배치하기 위해 특별히 고안된 몇 가지 CSS 템플릿이 있습니다. Uni-form

vessess.com

나는이 생산적이고 멋진 방향을 가리 킵니다 도움이되기를 바랍니다. 조심해.

출처

2011-01-04 12:06:18

아니요, 매우 가능하며 저는 (그리고 많은 다른 사람들이) 수년간 해왔습니다.

float: (left|right) 및 display: (inline|inline-block)을 확인하십시오.

출처

2011-01-04 02:44:15 alex

필드 위나 왼쪽 위의 레이블을 사용합니까? 지역 번호, 접두사, 전화 번호 접미사와 같이 텍스트 상자를 서로 옆에 놓아야 할 때 무엇을합니까? 예가 있습니까? – Caveatrob

@Caveatrob 다른 사이트의 CSS와 HTML을 확인하십시오. 수레를 들여다보십시오. – alex

@Caveatrob 세 개의 텍스트 상자가 있고 서로 옆에 놓기를 원할 경우 각 플로트가 왼쪽으로 놓이게됩니다 (약간의 패딩이있을 수 있음). 그러면 두 가지 모두를 해결할 수 있습니다. 후. HTML을 제공 할 수 있다면 CSS로 표시 할 수 있습니다. –

이렇게 하시겠습니까?

alt text

는 기본적으로 우리는이 pseudotable

.mxrow { 
clear: both; 
width: 100%; 
height: 50px; 
} 


.mxcell { 
float: left; 
padding-top: 10px; 
padding-bottom: 10px; 
height: 26px; 
} 

.mxcell_firstcell{ 
width: 25%; 
}

그리고 마크 업이

<div class = "mxrow"> 
    <div class = "mxcell mxcell_firstcell"><input element /></div> 
    <div class = "mxcell mxcell_secondcell"><another form element/></div> 
</div>

클래스 이름이 특정 CSS를 적용하는 역할을 각각의 셀 것이

(내 마크 업 그리드입니다) 작성

출처

2011-01-04 02:58:44

예. 양식을위한 부동/분할 CSS의 첫 번째 세트를 만들 때 나는 그 일을하는 b * tch를 가졌습니다. 온라인에서 찾은 모든 예제에는 한 줄에 하나의 레이블/단일 양식 컨트롤이 있습니다. – Caveatrob

글쎄, 많은 자바 스크립트 애니메이션이 테이블과 잘 작동하지 않기 때문에이 작업을 수행했습니다. 내가 당신을 위해 약간의 CSS를 가져 오자. –

우아한 퇴화는 여기 없다. –

다른 사람들이 당신에게 몇 가지 유효한 제안을합니다. 이온 ... 아직도 문제가 있다면 formee와 같은 형식 CSS 프레임 워크를 사용해보십시오. http://www.formee.org/

출처

2011-01-04 07:56:58 Nextneed

테이블이 아닌 CSS 폼 2011

답변

관련 문제