html - 表格 : Trying to align label and text area elements? 的 margin 基础知识

Question

好吧，问题看起来比较简单。

问题:我正在尝试将标签消息元素和文本区域元素并排对齐，就像其他输入字段一样。

这是一个截图: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>

Answer 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>