CSS를 사용하여 CSS 형식을 만드는 CSS를 사용 하시겠습니까? 위의 상자가있는 표가 없습니다.

Question

그림과 같이 표를 만들려고합니다.

Answer 1

이 패턴을 사용하십시오. 귀하의 수레를 취소하는 것을 잊지 마십시오.

<div class="contact"> 
<ul> 
    <li><label>First Name</label><input type="text" /></li> 
    <li><label>Last Name</label><input type="text" /></li> 
    ... etc ... 
</ul> 
</div> 

CSS :

.contact li { 
    float:left; 
    margin-right:10px; 
} 

label { 
    display:block 
} 

Answer 2

원하는 폭을 가진 포함 사업부의 요소를 설정하면, 자체 사업부의 각 행을 넣을 필요가 없습니다. 당신은 하나 개 이상의 입력 요소와 행에 대해 된 div를 만들고, 그들의 포함 사업부 인라인을 저장하기에 충분히 큰 경우가 수평으로 줄 수 있도록 다음

display:inline-block; 

에 입력 요소를 설정,하지만 당신은 할 수 있었다 블록 레벨 요소와 같은 너비를 설정하십시오. 또한 div에 상단 및 하단 테두리를 붙여 게시 한 이미지에서 나누는 선을 얻을 수 있습니다.

만들기 입력이 조금 이상한 일 수있다 블록 요소처럼 행동 - 당신은 또한 CSS3 상자 크기 조정 속성을 사용하여,이 방법을 시도해 볼 수도,들을 스타일 :

http://craveytrain.com/posts/making-inputs-behave합니다.

Answer 3

사용

<div style="font-size: 25px"> 
    Contant Information</div> 
<div style="border-bottom: 1px black dashed;width:55%"> 
</div> 
<ul style="padding-left: 0px"> 
    <div style="margin-top: 4px; display: inline-block"> 
     First Name</div> 
    <div style="display: inline-block; margin-left: 200px"> 
     Last Name</div> 
    <div style="display: inline-block; margin-left: 200px"> 
     Phone Number</div> 
    <br><input><input style="margin-left: 113px"><input style="margin-left: 113px"></ul> 
<div style="border-bottom: 1px black dashed; margin-top: 5px;width:55%"> 
</div> 
<ul style="font-size: 20px"> 
    Desired Vehicle</ul> 
<div style="border-bottom: 1px black dashed; margin-top: 5px;width:55%"> 
</div> 
<ul style="padding-left: 0px"> 
    <div style="margin-top: 4px; display: inline-block"> 
     Year</div> 
    <div style="display: inline-block; margin-left: 238px"> 
     Make</div> 
    <div style="display: inline-block; margin-left: 230px"> 
     Model</div> 
    <div style="display: inline-block; margin-left: 225px"> 
     Price Range</div> 
    <br><input><input style="margin-left: 113px"><input style="margin-left: 113px"><input style="margin-left: 113px"></ul> 
<div style="border-bottom: 1px black dashed; margin-top: 5px;width:55%"> 
</div> 
<ul style="padding-left: 0px; font-size: 17px"> 
    <div> 
     List any other features you would like the vehicle to include</div> 
    <textarea style="width: 600px; height: 120px"></textarea></ul>