포맷 나는이 같은 HTML 양식을 렌더링하기 위해 노력하고

Question

HTML 양식 : http://i.imgur.com/V53sv8F.jpg

내가 직면하고 문제는 다음과 같습니다

1. 나는 필드가 후 다음 줄에 갈 수 있도록 할 수 아니다 라벨

2. 나는 이메일 (또는 비밀번호)

의만큼으로 결합 된 첫 번째와 마지막의 firld 길이를 얻을 수 없었다

도움을 주시면 감사하겠습니다.

HTML 코드 :

<form> 
<label for="Name"><strong> Your Name:</strong></label> 
<input type="text" id="Name_First" name="Name_First" required> 
<input type="text" id="Name_Last" name="Name_Last" required> 

<label for="Email">Email Address:<input type="email" id="Email" name="Email" vrequired></label> 

<label for="RegPassword">Password:<input type="password" id="RegPasswordRegPassword" name="RegPassword" required></label> 
<form>  

JS 바이올린 링크 : http://jsfiddle.net/d6a4h9o8/

Answer 1

"폭"이 "디스플레이"를해야에 초점을 원하는 http://www.htmldog.com/guides/css/beginner/applyingcss/

를 읽어보십시오, 당신의 HTML이 잘못, 그래서 솔루션은 작동하지 않습니다 . 그래서 그 시작하자 :

<form> 
<div class="row"> 
    <label for="Name"><strong> Your Name:</strong></label> 
    <input type="text" id="Name_First" name="Name_First" /> 
    <input type="text" id="Name_Last" name="Name_Last" /> 
    </div> 
    <div class="row"> 
     <label for="Email">Email Address:</label><input type="email" id="Email" name="Email" /> 
    </div> 
    <div class="row"> 
     <label for="RegPassword">Password:</label><input type="password" id="RegPasswordRegPassword" name="RegPassword" /> 
    </div> 
<form>  

을 이제 우리는 적절한 마크 업을 가지고 있고 스타일 (그 class="row" 된 div에주의)에 도움이되는 몇 가지 div의를 추가 한 것을 우리가 CSS 이런 식으로 적용 할 수 있습니다

form { 
    background:#ccc; 
    padding:30px; 
    margin:0 auto; 
    width:50% 
} 
form label { 
    display: block; 
} 
input { 
    width:300px; 
} 
.row { 
    width:300px; 
    clear:both; 
    display:block; 
    position:relative; 
    margin:5px auto 
} 
.row:first-child input { 
    width:142px; 
} 
.row:first-child input:last-child { 
    position:absolute; 
    right:-5px; 
    width:144px 
} 

을 See fiddle이 단지 하나, 그것을 할 많은 방법이 있습니다, 이제 결과

을 볼 수 있지만, 가장 중요한 부분은 마크 업이 그때는 정말 쉽게 스타일링, 해결 한 것입니다.

Answer 2

이 시도 : 당신은 여전히 ​​물론, 추가 스타일을해야 할 것이다

label { 
    display: block; 
    clear: both; 
} 

.

Answer 3

사용

#Name_First { 
    ... 
} 

당신의 CSS 스타일과 특정 요소를 대상으로합니다. 당신이 먼저가 해결되지 않는 경우 는 당신이 우선 들어

Answer 4

그림은 그림과 유사합니다.

HTML

<form> 
<label for="Name"><strong> Your Name:</strong></label> 
<input type="text" id="Name_First" name="Name_First" required> 
<input type="text" id="Name_Last" name="Name_Last" required> 

<label for="Email">Email Address:</label> 
<input type="email" id="Email" name="Email" vrequired> 

<label for="RegPassword">Password:</label><input type="password" id="RegPassword" name="RegPassword" required> 
<form>  

CSS. 당신이 블록 요소의 기능을 원하는

form{ 
    max-width: 500px; 
    background: #d4d4d4; 
    padding: 20px; 
} 

form label {display: block;} 
input{padding: 7px 0;font-size: 25px;} 
input[type="text"]{width:48.2%;} 
input[type="email"],input[type="password"]{width: 98%;} 
}