HTML/CSS

에서 요소 사이에 공백을 만드는 방법 지금까지이 있습니다HTML/CSS

Position Applied For: <input type="text" name="position" value="Enter Position" size="20" /> Date: <input type="text" name="date" value="mm/dd/year" size="20" /> <br/> 
 
<br/> 
 
Name: <input type="text" name="last" value="Last Name" size="20" /> <input type="text" name="first" value="First Name" size="20"/> <input type="text" name="middle" value="Middle Name" size="20" /> Phone: <input type="text" name="phone" value="Area Code First" size="20" maxlength="12"/> (Seperate with -) <br/> 
 
<br/> 
 
Address: <input type="text" name="address" value="Address" size="20" /> City: <input type="text" name="city" value="City" size="20" /> State: <input type="text" name="state" value="State" size="20" /> Zip Code: <input type="text" name="zip" value="Zip Code" size="20" maxlength="5"/> <br/>

그것은 형태가 바로 옆에 브라우저에 표시합니다. 그 사이에 어떤 공간을 만들고 멋지게 정렬하려면 어떻게해야합니까?

출처

2012-01-12 lrnsomethingnew

어떻게 줄을 세우시겠습니까? 각 줄마다 하나씩? 일부 '
'요소를 추가했습니다. 그게 당신이 원하는 유일한 휴식입니까? – ThinkingStiff

사용 UL 및 CSS는 : 그들은 모든 텍스트 필드이기 때문에

#a-form {list-style: none; margin:0; padding: 0;} 
 
    #a-form li {} 
 
    #a-form input {display:inline-block; margin-right: 1em;}

<ul id="a-form"> 
 
     <li>Position Applied For: <input type="text" name="position" value="Enter Position" size="20" /> Date: <input type="text" name="date" value="mm/dd/year" size="20" /></li> 
 
     <li>Name: <input type="text" name="last" value="Last Name" size="20" /> <input type="text" name="first" value="First Name" size="20"/> <input type="text" name="middle" value="Middle Name" size="20" /> Phone: <input type="text" name="phone" value="Area Code First" size="20" maxlength="12"/> (Seperate with -)</li> 
 
     <li>Address: <input type="text" name="address" value="Address" size="20" /> City: <input type="text" name="city" value="City" size="20" /> State: <input type="text" name="state" value="State" size="20" /> Zip Code: <input type="text" name="zip" value="Zip Code" size="20" maxlength="5"/></li> 
 
    </ul>

출처

2012-01-12 04:50:17 itea

감사합니다! 나는 그것을 할 수있는 많은 방법이 있다는 것을 알았지 만, 당신의 방법으로 가기로 결정했습니다. – lrnsomethingnew

-1

많은 사람들이 다른 것을 제안 할 수도 있지만 귀하의 경우에는 <table>을 사용하는 것이 좋습니다.

출처

2012-01-12 04:50:00 shinkou

내용이 표 형식의 데이터가 아닙니다. – Ktash

@Ktash 우리가 우리의 내용을 그리드 모양의 레이아웃으로 정렬하고자 할 때, 대부분의 경우에 테이블의 적합성이 더 좋아집니다. coz 우리는 유사한 결과를 모방하기 위해 CSS + 자바 스크립트 해킹을 적용 할 수 있지만 유지 관리에 매우 불필요하게 복잡한 코드가 생성됩니다. 많은 웹 디자이너는 CSS를 사용하여 스타일링을 위해 CSS를 엄격하게 사용하지만 프로그래밍 통치에서는 코드를 덜 복잡하고 명확하게 유지하므로 코드를 쉽게 유지 관리 할 수 있습니다. 어쨌든, OP는 그리드에서 내용을 정렬 할 필요가없는 것처럼 보입니다. 그리드에서 내용을 정렬하려고했는데, 나는 그/그녀가 질문을 읽고 싶다고 생각했습니다. – shinkou

'레이아웃은 유지하기가 훨씬 어렵습니다. 나는 웹 프로그래머이고 디자이너는 아니며 CSS는 유지하기가 훨씬 쉽다. 스타일과 프리젠 테이션을 분리하면 유지 보수, 업데이트 및 업그레이드가 훨씬 쉬워지고 최신 브라우저는 '

'이 처리 할 수있는 충분한 CSS를 지원합니다. '

'기반 디자인을 시작한 사람은 1997 년 그가 인터넷을 망쳤다는 재미있는 기사를 썼다. 관심이 있다면 좋은 읽을 거리 http://www.xml.com/pub/a/w3j/s1.people.html – Ktash

, 그것은 쉽게! 나는 CSS 디스플레이를 사용하는 것이 좋습니다 것입니다 : 블록 기능

는 CSS가있다 :

input[type="text"]{ 
display:block; 
margin-bottom:20px; 
}

여기에 귀하의 예를 I put into JSFiddle이 있습니다. 원하는대로 조정하려면 약간의 조정이 필요할 수도 있지만, 이것이 내가 생각할 수있는 가장 쉬운 방법입니다!

출처

2012-01-12 04:55:17

답변

관련 문제