2017-06-30 6 views
0

さて、この問題は比較的単純なようです。フォーム上のマージンの基本:ラベルとテキストエリアの要素を整列しようとしていますか?

問題:私はラベルメッセージ要素とテキストエリア要素を他の入力フィールドと同じように並べて整列しようとしています。ここで

はスクリーンショットです:http://imgur.com/a/2AUBA

私はおそらく絶対位置を使用することができます知っているが、私は何かが、おそらく私が何を知らない私の余白が間違っている知っています。どんなアイデアですか?

footer { 
 
    \t background-color: #2094d0; 
 
    } 
 
    .contact-us-section h3 { 
 
    
 
    } 
 
    footer label { 
 
    \t color: #fff; 
 
    \t padding: 1em; 
 
    \t margin-left: 1%; 
 
    
 
    } 
 
    
 
    footer input { 
 
    \t margin: 2%; 
 
    \t border-style: none; 
 
    \t padding: 2%; 
 
    } 
 
    
 
    footer fieldset { 
 
    \t border-style: none; \t 
 
    } 
 
    
 
    footer textarea { 
 
    \t border: none; 
 
    \t margin-top: 1%; 
 
    \t margin-left: 28%; 
 
    \t margin-right: 0; 
 
    
 
    \t background-color: black; 
 
    } 
 
    
 
    footer #message-label { 
 
    \t background-color:orange; 
 
    
 
    }
\t <footer> 
 
\t \t <div class="contact-us-section"> 
 
\t \t \t <h3> CONTACT US</h3> 
 
\t \t \t <form action="#"> 
 
\t \t \t \t <fieldset> 
 
\t \t \t \t \t <label>Name:</label></form> 
 
\t \t \t \t \t <input type="text" value="name"><br> \t 
 
\t \t \t \t </fieldset> 
 
\t \t \t \t <fieldset> 
 
\t \t \t \t \t <label>Email:</label> 
 
\t \t \t \t \t <input type="text" value="email"><br> \t \t \t \t \t 
 
\t \t \t \t </fieldset> 
 
\t \t \t \t \t <label id="message-label">Message:</label> 
 
\t \t \t \t \t <textarea rows="10" cols="39" maxlength="200"></textarea></br> 
 
\t \t \t \t \t <input type="submit" value="Submit"> \t \t \t \t \t 
 
\t \t \t </form> 
 
\t \t </div> 
 
\t \t <div class="location"> 
 
\t \t \t <!-- map icon --> 
 
\t \t \t <img src="img/map-icon.png"> 
 
\t \t \t <p>25/153 Queens st, Avenue, Brisbane, QLD 4000</p> 
 

 
\t \t \t <!-- map image --> 
 
\t \t \t <img src="img/map.png"> 
 
\t \t </div> 
 
\t \t <div class="social-wrapper"> 
 
\t \t \t <!-- Social icons --> 
 
\t \t \t <img src="img/instagram-icon.png"> 
 
\t \t \t <img src="img/twitter-icon.png"> 
 
\t \t \t <img src="img/fb-icon.png"> 
 
\t \t \t 
 
\t \t </div> 
 

 
\t \t <p> KEEVA INC © 2017 </p> 
 

 
\t </footer>

答えて

0

CSSの下に追加するか、それを得るためにfooter textareavertical-align:middleを使用しています。 CSSの

.box { 
    display:flex; 
    align-items:center; 
} 

変更

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>

0

そして、ここでは、テキストエリアのアライメントを解決する方法の例です(あなたは垂直整列を使用する必要があります:真ん中;)

footer { 
 
    \t background-color: #2094d0; 
 
    } 
 
    .contact-us-section h3 { 
 
    
 
    } 
 
    
 

 
    footer label { 
 
    \t color: #fff; 
 
    \t padding: 1em; 
 
    \t margin-left: 1%; 
 
    
 
    } 
 
    
 
    footer input { 
 
    \t margin: 2%; 
 
    \t border-style: none; 
 
    \t padding: 2%; 
 
    } 
 
    
 
    footer fieldset { 
 
    \t border-style: none; \t 
 
    } 
 
    
 
    footer textarea { 
 
    \t border: none; 
 

 
    \t border-style: none; 
 
     vertical-align: middle; 
 
    
 
    \t background-color: black; 
 
    } 
 
    
 
    footer #message-label { 
 
    \t background-color:orange; 
 
    
 
    }

 
\t <footer> 
 
\t \t <div class="contact-us-section"> 
 
\t \t \t <h3> CONTACT US</h3> 
 
\t \t \t <form action="#"> 
 
\t \t \t \t <fieldset> 
 
\t \t \t \t \t <label>Name:</label></form> 
 
\t \t \t \t \t <input type="text" value="name"/><br> \t 
 
\t \t \t \t </fieldset> 
 
\t \t \t \t <fieldset> 
 
\t \t \t \t \t <label for="email">Email:</label> 
 
\t \t \t \t \t <input id="email" type="text" value="email"/><br> \t \t \t \t \t 
 
\t \t \t \t </fieldset> 
 
     <fieldset > 
 
\t \t \t \t \t <label for="textarea" >Message:</label> 
 
\t \t \t \t \t <textarea id="textarea" rows="10" cols="39" maxlength="200"></textarea></br> 
 
     </fieldset> 
 
\t \t \t \t <input type="submit" value="Submit"> \t \t \t \t \t 
 
\t \t \t </form> 
 
\t \t </div> 
 
\t \t <div class="location"> 
 
\t \t \t <!-- map icon --> 
 
\t \t \t <img src="img/map-icon.png"> 
 
\t \t \t <p>25/153 Queens st, Avenue, Brisbane, QLD 4000</p> 
 

 
\t \t \t <!-- map image --> 
 
\t \t \t <img src="img/map.png"> 
 
\t \t </div> 
 
\t \t <div class="social-wrapper"> 
 
\t \t \t <!-- Social icons --> 
 
\t \t \t <img src="img/instagram-icon.png"> 
 
\t \t \t <img src="img/twitter-icon.png"> 
 
\t \t \t <img src="img/fb-icon.png"> 
 
\t \t \t 
 
\t \t </div> 
 

 
\t \t <p> KEEVA INC © 2017 </p> 
 

 
\t </footer>

footer { 
 
    \t background-color: #2094d0; 
 
    } 
 
    .contact-us-section h3 { 
 
    
 
    } 
 
    footer label { 
 
    \t color: #fff; 
 
    \t padding: 1em; 
 
    \t margin-left: 1%; 
 
    
 
    } 
 
    
 
    footer input { 
 
    \t margin: 2%; 
 
    \t border-style: none; 
 
    \t padding: 2%; 
 
    } 
 
    
 
    footer fieldset { 
 
    \t border-style: none; \t 
 
    } 
 
    
 
    footer textarea { 
 
    \t border: none; 
 
    \t margin-top: 1%; 
 
    \t margin-left: 28%; 
 
    \t margin-right: 0; 
 
    
 
    \t background-color: black; 
 
    } 
 
    
 
    footer #message-label { 
 
    \t background-color:orange; 
 
    
 
    }
\t <footer> 
 
\t \t <div class="contact-us-section"> 
 
\t \t \t <h3> CONTACT US</h3> 
 
\t \t \t <form action="#"> 
 
\t \t \t \t <fieldset> 
 
\t \t \t \t \t <label>Name:</label></form> 
 
\t \t \t \t \t <input type="text" value="name"><br> \t 
 
\t \t \t \t </fieldset> 
 
\t \t \t \t <fieldset> 
 
\t \t \t \t \t <label>Email:</label> 
 
\t \t \t \t \t <input type="text" value="email"><br> \t \t \t \t \t 
 
\t \t \t \t </fieldset> 
 
\t \t \t \t \t <label id="message-label">Message:</label> 
 
\t \t \t \t \t <textarea rows="10" cols="39" maxlength="200"></textarea></br> 
 
\t \t \t \t \t <input type="submit" value="Submit"> \t \t \t \t \t 
 
\t \t \t </form> 
 
\t \t </div> 
 
\t \t <div class="location"> 
 
\t \t \t <!-- map icon --> 
 
\t \t \t <img src="img/map-icon.png"> 
 
\t \t \t <p>25/153 Queens st, Avenue, Brisbane, QLD 4000</p> 
 

 
\t \t \t <!-- map image --> 
 
\t \t \t <img src="img/map.png"> 
 
\t \t </div> 
 
\t \t <div class="social-wrapper"> 
 
\t \t \t <!-- Social icons --> 
 
\t \t \t <img src="img/instagram-icon.png"> 
 
\t \t \t <img src="img/twitter-icon.png"> 
 
\t \t \t <img src="img/fb-icon.png"> 
 
\t \t \t 
 
\t \t </div> 
 

 
\t \t <p> KEEVA INC © 2017 </p> 
 

 
\t </footer>

他のラベル付き
関連する問題