"이봐, 잠자리에 들기 전에 10 분만 연습하자"라고 생각 했어. 그래 .. 한 시간이 지났는데 알아낼 수가 없어!
레이블을 제외하고 모두 중앙에 배치하고 싶습니다. 입력 위에있는 맨 왼쪽에 있습니다. 물론 창 크기를 조정하면 입력을 "따라 가기"를 원합니다. 그렇지 않으면 px로 위치를 조정할 수 있습니다.
내가 어떻게 해? 대단히 감사합니다!
* {
margin: 0;
box-sizing: border-box;
}
.form1 {
background: linear-gradient(to right bottom, deepskyblue, pink);
margin: 10px;
border: 1px solid black;
padding: 50px 150px;
display: flex;
flex-direction: column;
font-family: helvetica;
font-size: 14px;
}
.space:focus {
outline-color: black;
}
.space {
width: 300px;
}
.submit {
width: 30vw;
align-self: center;
background: linear-gradient(to top left, rgb(255,105,200), aqua);
border: none;
border-radius: 20px;
padding: 5px;
font-family: verdana;
font-weight: 600;
} <div class="form1">
<label for="name">Name</label>
<input class="space" type="text" id="name"><br><br>
<label for="email">E-mail</label>
<input class="space" type="email" id="email"><br><br>
<label for="message">Message</label>
<textarea class="space placeholder" name="name" rows="8" cols="50" onfocus="this.placeholder=''" onblur="this.placeholder='Write your message here'"></textarea><br>
<input type="submit" class="submit" value="Send">
</div>이 결과를 원하십니까?
* {
margin: 0;
box-sizing: border-box;
}
.form1 {
background: linear-gradient(to right bottom, deepskyblue, pink);
margin: 10px;
border: 1px solid black;
padding: 50px 150px;
display: flex;
flex-direction: column;
align-items: center;
font-family: helvetica;
font-size: 14px;
}
.form1 label {
max-width: 300px;
width: 100%;
}
.space:focus {
outline-color: black;
}
.space {
/*width: 300px;*/
max-width: 300px;
width: 100%;
}
.submit {
/*width: 30vw;*/
max-width: 300px;
width: 100%;
align-self: center;
background: linear-gradient(to top left, rgb(255,105,200), aqua);
border: none;
border-radius: 20px;
padding: 5px;
font-family: verdana;
font-weight: 600;
}<div class="form1">
<label for="name">Name</label>
<input class="space" type="text" id="name"><br><br>
<label for="email">E-mail</label>
<input class="space" type="email" id="email"><br><br>
<label for="message">Message</label>
<textarea class="space placeholder" name="name" rows="8" cols="50" onfocus="this.placeholder=''" onblur="this.placeholder='Write your message here'"></textarea><br>
<input type="submit" class="submit" value="Send">
</div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다