dd dtの幅設定を実現したい

現在HTMLとCSSを勉強中でサイトを思ったように表現できるか
練習中なのですが、
Contactの箇所に関して、FORMのdl,dt,ddを使って幅960pxの中で
設定したいのですが、dd設定がおかしいのか幅いっぱいに表示されない状態です。
いろいろ調べてみたのですが、原因がわからず質問させていただきました。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta http-equiv="X-UA-Compatible" content="IE=edge">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <link rel="icon" href="favicon.ico">
8  <link rel="stylesheet" href="css/styles.css">
9  <title>MyWork</title>
10</head>
11
12<body>
13  <div id="content">
14
15<header id="header">
16  <h1>My Work</h1>
17  <nav class="nav">
18    <ul>
19      <li><a href="#">About</a></li>
20      <li><a href="#">Works</a></li>
21      <li><a href="#">News</a></li>
22      <li><a href="#">Contact</a></li>
23      <!-- <li><a href="#"><img src="img/icon-instagram.png"></a></li> -->
24    </ul>
25  </nav>
26</header> 
27
28<main>
29  <div id="mainvisual">
30    <img src="img/mainvisual-pc1.jpg">
31  </div>
32 
33  <div class="conta">
34
35<div class="about">  
36<h2 class="site-title">About</h2>
37<p>Xxxxx Ashley</p>
38<address>
39  <p>2th Floor xxxxx Building x-x-x Nishiazabu, Minato-ku, Tokyo 106-0031 Japan</p>
40  <p>tel: 000-0000-0000</p>
41  <p>url: www.xxxxxx.jp</p>
42  <p>mail: xxx@xxxxxx.jp</p>
43</address>  
44  <p>プロフィールテキストテキストテキストテキストテキストテキストテキストテキストテキストスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
45</div>
46
47<div class="Works">  
48<h2 class="site-title">Works</h2>
49<div class="photo">
50<img src="img/works1.jpg">
51<img src="img/works2.jpg">
52<img src="img/works3.jpg">
53</div>
54<div class="photo">
55<img src="img/works4.jpg">
56<img src="img/works5.jpg">
57<img src="img/works6.jpg">
58</div>
59</div>
60
61
62<h2 class="site-title">News</h2>
63<div class="news">
64<ul>
65  <li class="top">
66  <div>2020.XX.XX</div>
67  <div class="topic">デザイン雑誌「ＸＸＸＸＸＸ Vol.11』に掲載していただきました。</div>
68  </li>
69
70  <li>
71  <div>2020.XX.XX</div>
72  <div class="topic">
73  ＸＸ月ＸＸ日から写真集「ＸＸＸＸＸＸＸ」の販売を開始します。
74  </div>
75  </li>
76
77  <li> 
78  <div>2019.XX.XX</div>
79  <div class="topic">
80  【イベント開催のお知らせ】テキストテキストテキストテキストテキストテキストテキスト
81  </div>
82  
83  <li>
84  <div>2019.XX.XX</div>
85  <div class="topic">
86    デザイン雑誌「ＸＸＸＸＸＸ Vol.10』に掲載していただきました。 
87  </div>
88  </li>
89
90  <li>
91  <div>2019.XX.XX</div>
92  <div class="topic">【個展開催のお知らせ】テキストテキストテキストテキストテキストテキストテキスト
93</div>
94</li>
95</ul>
96</div>
97
98<div id="otoiawase">
99<h2 class="site-title">Contact</h2>
100<form action="#" method="post">
101	<dl>
102		<dt>name</dt>
103		<dd><input type="text" class="txt"></dd>
104	</dl>
105	<dl>
106		<dt>e-mail</dt>
107		<dd><input type="number" class="txt"></dd>
108	</dl>
109	<dl>
110		<dt>Contact</dt>
111		<dd><textarea name="other" class="txt" cols="50" rows="7"></textarea></dd>
112	</dl>
113	<dl>
114		<dt><input type="reset" value="リセッﾄ">
115			<input type="submit" value="送信"></dt>
116	</dl>
117</form>
118</div>
119</div>
120</main>
121</div>
122</body>
123</html>

CSS
1body {
2  width: 100%;
3  height: 100%;
4}
5
6
7img {
8  max-width: 100%;
9}
10
11#header {
12  display: flex;
13  justify-content: space-between;
14  max-width: 960px;
15  align-items: center;
16  margin: 0 auto;
17  height: 270px;
18}
19
20.nav {
21  margin-top: 15px;
22}
23.nav ul {
24  display: flex;
25}
26
27.nav li {
28  list-style: none;
29  margin-right: 10px;
30}
31
32
33#mainvisual {
34 margin-bottom: 80px;
35}
36.mainvisual img {
37  width: 100%;
38  max-width: 1920px;
39  height: 420px;
40  object-fit: cover;
41}
42
43.conta {
44  max-width: 960px;
45  align-items: center;
46  margin: 0 auto;
47}
48.about {
49  margin: 0 auto;
50
51}
52
53.site-title {
54  text-align: center;
55  padding-bottom: 20px;
56}
57
58.photo img {
59 width: 300px;
60 margin: 0 auto 20px auto;
61}
62.photo {
63  display: flex;
64  justify-content: space-between;
65}
66
67
68.news ul {
69  max-width: 960px;
70  padding: 15px;
71}
72
73.news ul li {
74  display: flex;
75  padding: 15px;
76  border-bottom: 1px solid gainsboro;
77}
78
79.top {
80  border-top: 1px solid gainsboro;
81}
82
83.topic {
84  margin-left: 100px;
85}
86
87.txt{
88  display: inline-block;
89  width: 50%;
90  padding: 0.5em;
91  border: 1px solid #999;
92  box-sizing: border-box;
93  margin: 0.5em 0;
94}
95
96#otoiawase {
97  max-width: 960px;
98  margin: 0 auto 130px auto;
99  font-size: 0.9rem;
100  padding: 0 4%;
101}
102
103#otoiawase {
104  width: 960px;
105  margin: 60px auto;
106}
107
108#otoiawase dl {
109  display: flex;
110  flex-wrap: wrap;
111  margin-bottom: 20px;
112} 
113
114#otoiawase dt {
115  width: 15%;
116  margin-bottom: 10px;
117}
118
119#otoiawase dd {
120  width: 85%;
121  margin-inline-start: 0;
122  margin-bottom: 10px;
123}
124

行動規範の内容に同意します

回答1件

Contactの箇所に関して、FORMのdl,dt,ddを使って幅960pxの中で
設定したいのですが、dd設定がおかしいのか幅いっぱいに表示されない状態です。

dtの幅15%、ddの幅85％に設定してあるので、両方で幅いっぱい(100%)になってます。
中のテキストボックス(.txt)が幅いっぱいになっていないことを言っているなら、width: 50%;を設定しているからです。ddの幅いっぱいにしたいのなら、これをwidth: 100%;に修正すればいいでしょう。

投稿2022/02/28 01:28