연락처 양식 7의 입력 상자 정렬

입력 상자를 WordPress의 연락처 양식 7에 정렬하려고합니다. 지금은 비틀 거리고 있습니다. 수직으로 정렬하려면 어떻게해야합니까?연락처 양식 7의 입력 상자 정렬

<div style="background-color:green"> 
    <div style="text-align: center;color:white">Heading</div> 

    <div style="margin-bottom:5px"><div style="color:white; position:relative; display:inline-block;padding-right:10px;padding-left:10px;">Name:</div> 
    <div style="position:relative; display:inline-block; ">[text* your-name]</div></div> 

    <div style="margin-bottom:5px"><div style="color:white; position:relative; display:inline-block;padding-right:10px;padding-left:10px;">Surname:</div> 
    <div style="position:relative; display:inline-block;margin-right:5px;">[text* your-name]</div></div> 

    <div style="margin-bottom:5px"><div style="color:white; position:relative; display:inline-block;padding-right:10px;padding-left:10px;">Email:</div> 
    <div style="position:relative; display:inline-block;margin-right:5px;">[text* your-name]</div></div> 
</div>

출처

2014-01-21 user3142828

당신이 모르는 경우 여기

<div style="background-color:green"> <div style="text-align: center;color:white">Heading</div> <form id="contact"> <label>Name:</label> <input type="text" /> <label>Surname:</label> <input type="text" /> <label>Email:</label> <input type="text" /> </form> </div>

는 CSS입니다 : 여기

는 HTML입니다 : 친척, 당신은 아마 그것을 사용해서는 안됩니다. –

입력 필드에 부모를 입력해야합니다.

그런 다음 부모가 있으면 레이블 (텍스트)과 입력 (텍스트 필드)에 특정 폭을 입력하여 스타일 폭의 100 % 또는 거의 100 %를 차지하게하여 우아하게 정렬 할 수 있습니다.

#contact { 
    width: 50%; 
} 

#contact input, #contact label { 
    display: inline-block; 
} 

#contact label { 
    width: 30%; 
} 

#contact input { 
    width: 65%; 
}

마지막으로, 바이올린은 : 당신이 위치를 사용하는 이유 Demo

출처

2014-01-21 21:05:55

연락처 양식 7의 입력 상자 정렬

답변

관련 문제