CSS 레이블 텍스트 상자 레이아웃

-1

나는 등록 마스크를위한 템플릿을 가지고 있습니다. 입력란에 ID 전용 클래스가 없기 때문에 <p>을 사용합니다. 2 행이있는 그림과 같아야합니다. 나는 여분의 div, 테이블이 싫어. 가능한가?CSS 레이블 텍스트 상자 레이아웃

HTML은 (요소는 다른 순서로 할 수있다)

<div id="parent"> 
    <p class="Useraccount-Email-Repeat-Label"></p> 
    <input class="Useraccount-Email-Repeat" type="text" /> 
    <p class="Useraccount-Password-Repeat-Label"></p> 
    <input class="Useraccount-Password-Repeat" type="text" /> 
    <p class="Useraccount-Email-Label"></p> 
    <input class="Useraccount-Email" type="text" /> 
    <p class="Useraccount-Password-Label"></p> 
    <input class="Useraccount-Password" type="text" /> 
    </div>

enter image description here

출처

2013-06-09 MR.ABC

무엇을 시도 했습니까? ** CSS **를 표시하거나 [JSFiddle] (http://jsfiddle.net/)을 만드십시오. – Vucko

아무것도 나는 단지 더 좋은 CSS를 만들려고 노력하지 않습니다. 나는 이것을 해결할 방법을 찾고있는 이유입니다. 나는이 솔루션에 대한 어떤 CSS도 가지고 있지 않다. 그래서 나는 묻는다. –

각 입력에 고유 한 클래스를 제공하는 경우이 값은 ID 여야합니다. 모든 입력에 동일한 클래스를 제공하여 CSS에서 사용할 수 있습니다. p가 아닌 레이블을 사용할 수 있으며 CSS에서 적절하게 형식을 지정할 수 있습니다. 하지만 몇 가지 도움을 받으려면 몇 가지 CSS를 보여 주어야합니다. –

이 시도 : HTML :

<div id="parent"> 
    <p class="Useraccount-Email-Repeat-Label"></p> 
    <input class="Useraccount-Email-Repeat" type="text" /> 
    <p class="Useraccount-Email-Label"></p> 
    <input class="Useraccount-Email" type="text" /> 
    <p class="Useraccount-Password-Label"></p> 
    <input class="Useraccount-Password" type="text" /> 
    <p class="Useraccount-Password-Repeat-Label"></p> 
    <input class="Useraccount-Password-Repeat" type="text" /> 
    </div>

CSS :

#parent p, 
#parent input{margin:0 2% 2%;float:left;width:48%;display:block} 
#parent input{border:1px solid #ccc; border-radius:3px}

를

출처

2013-06-09 16:25:46 saosangmo

작동하지 않습니다 .... –

CSS 레이블 텍스트 상자 레이아웃

답변

관련 문제