【问题标题】：Margin Basics on Form: Trying to align label and text area elements?表单边距基础知识：尝试对齐标签和文本区域元素？
【发布时间】：2017-06-30 11:18:00
【问题描述】：
好的，问题似乎比较简单。
问题：我正在尝试将标签消息元素和文本区域元素并排对齐，就像其他输入字段一样。
这里是截图：http://imgur.com/a/2AUBA
我知道我可以使用绝对定位，但我知道我的边距有问题，也许我不知道是什么。请问有什么想法吗？
footer {
background-color: #2094d0;
}
.contact-us-section h3 {
}
footer label {
color: #fff;
padding: 1em;
margin-left: 1%;
}
footer input {
margin: 2%;
border-style: none;
padding: 2%;
}
footer fieldset {
border-style: none;
}
footer textarea {
border: none;
margin-top: 1%;
margin-left: 28%;
margin-right: 0;
background-color: black;
}
footer #message-label {
background-color:orange;
}
<footer>
<div class="contact-us-section">
<h3> CONTACT US</h3>
<form action="#">
<fieldset>
<label>Name:</label></form>
<input type="text" value="name"><br>
</fieldset>
<fieldset>
<label>Email:</label>
<input type="text" value="email"><br>
</fieldset>
<label id="message-label">Message:</label>
<textarea rows="10" cols="39" maxlength="200"></textarea></br>
<input type="submit" value="Submit">
</form>
</div>
<div class="location">
<!-- map icon -->
<img src="img/map-icon.png">
<p>25/153 Queens st, Avenue, Brisbane, QLD 4000</p>
<!-- map image -->
<img src="img/map.png">
</div>
<div class="social-wrapper">
<!-- Social icons -->
<img src="img/instagram-icon.png">
<img src="img/twitter-icon.png">
<img src="img/fb-icon.png">
</div>
<p> KEEVA INC © 2017 </p>
</footer>
【问题讨论】：
标签：
html
css
forms
webforms
margin
【解决方案1】：
这里有一个例子如何解决textarea与其他标签的对齐问题：（你需要使用vertical-align: middle;）
footer {
background-color: #2094d0;
}
.contact-us-section h3 {
}
footer label {
color: #fff;
padding: 1em;
margin-left: 1%;
}
footer input {
margin: 2%;
border-style: none;
padding: 2%;
}
footer fieldset {
border-style: none;
}
footer textarea {
border: none;
border-style: none;
vertical-align: middle;
background-color: black;
}
footer #message-label {
background-color:orange;
}
<footer>
<div class="contact-us-section">
<h3> CONTACT US</h3>
<form action="#">
<fieldset>
<label>Name:</label></form>
<input type="text" value="name"/><br>
</fieldset>
<fieldset>
<label for="email">Email:</label>
<input id="email" type="text" value="email"/><br>
</fieldset>
<fieldset >
<label for="textarea" >Message:</label>
<textarea id="textarea" rows="10" cols="39" maxlength="200"></textarea></br>
</fieldset>
<input type="submit" value="Submit">
</form>
</div>
<div class="location">
<!-- map icon -->
<img src="img/map-icon.png">
<p>25/153 Queens st, Avenue, Brisbane, QLD 4000</p>
<!-- map image -->
<img src="img/map.png">
</div>
<div class="social-wrapper">
<!-- Social icons -->
<img src="img/instagram-icon.png">
<img src="img/twitter-icon.png">
<img src="img/fb-icon.png">
</div>
<p> KEEVA INC © 2017 </p>
</footer>
footer {
background-color: #2094d0;
}
.contact-us-section h3 {
}
footer label {
color: #fff;
padding: 1em;
margin-left: 1%;
}
footer input {
margin: 2%;
border-style: none;
padding: 2%;
}
footer fieldset {
border-style: none;
}
footer textarea {
border: none;
margin-top: 1%;
margin-left: 28%;
margin-right: 0;
background-color: black;
}
footer #message-label {
background-color:orange;
}
<footer>
<div class="contact-us-section">
<h3> CONTACT US</h3>
<form action="#">
<fieldset>
<label>Name:</label></form>
<input type="text" value="name"><br>
</fieldset>
<fieldset>
<label>Email:</label>
<input type="text" value="email"><br>
</fieldset>
<label id="message-label">Message:</label>
<textarea rows="10" cols="39" maxlength="200"></textarea></br>
<input type="submit" value="Submit">
</form>
</div>
<div class="location">
<!-- map icon -->
<img src="img/map-icon.png">
<p>25/153 Queens st, Avenue, Brisbane, QLD 4000</p>
<!-- map image -->
<img src="img/map.png">
</div>
<div class="social-wrapper">
<!-- Social icons -->
<img src="img/instagram-icon.png">
<img src="img/twitter-icon.png">
<img src="img/fb-icon.png">
</div>
<p> KEEVA INC © 2017 </p>
</footer>
【解决方案2】：
在css下面添加或使用vertical-align:middle到footer textarea获取。
.box {
display:flex;
align-items:center;
}
css的变化
footer textarea {
border: none;
/*margin-top: 1%;*/
margin-left: 1%;
margin-right: 0;
background-color: black;
color:#fff;
}
HTML
<div class="box">
<label id="message-label">Message:</label>
<textarea rows="10" cols="39" maxlength="200"></textarea></br>
</div>
footer {
background-color: #2094d0;
}
.contact-us-section h3 {}
footer label {
color: #fff;
padding: 1em;
margin-left: 1%;
}
footer input {
margin: 2%;
border-style: none;
padding: 2%;
}
footer fieldset {
border-style: none;
}
.box {
display:flex;
align-items:center;
}
footer textarea {
border: none;
/*margin-top: 1%;*/
margin-left: 1%;
margin-right: 0;
background-color: black;
color:#fff;
}
footer #message-label {
background-color: orange;
}
<footer>
<div class="contact-us-section">
<h3> CONTACT US</h3>
<form action="#">
<fieldset>
<label>Name:</label></form>
<input type="text" value="name"><br>
</fieldset>
<fieldset>
<label>Email:</label>
<input type="text" value="email"><br>
</fieldset>
<div class="box">
<label id="message-label">Message:</label>
<textarea rows="10" cols="39" maxlength="200"></textarea></br>
</div>
<input type="submit" value="Submit">
</form>
</div>
<div class="location">
<!-- map icon -->
<img src="img/map-icon.png">
<p>25/153 Queens st, Avenue, Brisbane, QLD 4000</p>
<!-- map image -->
<img src="img/map.png">
</div>
<div class="social-wrapper">
<!-- Social icons -->
<img src="img/instagram-icon.png">
<img src="img/twitter-icon.png">
<img src="img/fb-icon.png">
</div>
<p> KEEVA INC © 2017 </p>
</footer>