htmlの模写をしています。見本のように行をそろえたいです。
自分が書いたもの
見本
html
html
1 2 3<section id="contact" class="wrapper"> 4 <h2 class="sec-title">Contact</h2> 5 <form action="method" method="post"> 6 <dl> 7 <dt><label for="name">NAME</label></dt> 8 <dd><input type="text" id="name" name="your-name"></dd> 9 <dt><label for="email">E-mail</label></dt> 10 <dd><input type="email" id="email" name="your-email"></dd> 11 <dt><label for="message">MESSAGE</label></dt> 12 <dd><textarea id="message" name="your-message"></textarea></dd> 13 </dl> 14 <div class="button"><input type="submit" value="送信"></div> 15 </form> 16 </section>
css
css
1#contact dl { 2 display: flex; 3 flex-wrap: wrap; 4 margin-bottom: 20px; 5} 6 7#contact dt { 8 width: 15%; 9} 10 11#contact dd { 12 width: 85%; 13 margin-bottom:10px; 14} 15 16#contact dd input,#contact dd textarea{ 17 width:100%; 18 border:solid 1px #c8c8c8; 19 padding:10px; 20} 21 22#contact dd textarea{ 23 height:10rem; 24}
displayをflexに、15%、85%で分けてみたのですかうまくいきません。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/05/10 06:42