{margin: 0;}を追加したら、入力フォームの位置が縦に配置していた入力フォームの縦の位置がずれたので、フォームの上にある「名前」などの文字を消したら、付属画像のようにフォームが、なぜか横に並ぶのですが、これを縦に並べたいのですが、どうしたらよいでしょうか？困っています。cssの #bangouの下にある♯の所も、字数制限のため、文字カットしています。 #bangouと全く同じCSSです。回答よろしくお願いいたします。コードは以下です。 *{margin: 0;} /* 画像と文字の背景色の設定 */ .wrap{ width: 100%; margin:0 auto; } /* 入力フォームの位置 */ .auto-style1 { text-align: center; } /* セレクトボックスの位置 */ .auto-style2 { text-align: center; } 様々なものがります。 ※お申し込みフォーム選択 ◎◎◎ｃｓｓのコード /* 画像の横に文字を配置する */ .flex{ display: flex; padding: 10px; } .flex div{ width: 50%; } /* セレクトボックスのデザイン1 */ #plan{ vertical-align: middle; box-sizing: border-box; border: 3px solid #63e02d; /* 枠線 */ width: 27.1em; height: 53px; line-height: 1.2; /* 行の高さ */ } /* 入力フォームのスタイル */ #bangou { border: 3px solid #63e02d; padding: 0.5em;/* 内側の余白量 */ width: 25.5em; height: 30px; line-height: 1.2;/* 行の高さ */ } #name { } #furigana { } #tel { } #email { } form{margin-top: 110px; }

{margin: 0;}を追加したら、入力フォームの位置が縦に配置していた入力フォームの縦の位置がず

解決済

質問者：pjdmgam
質問日時：2021/06/25 07:36
回答数：1件

{margin: 0;}を追加したら、入力フォームの位置が縦に配置していた入力フォームの縦の位置がずれたので、
フォームの上にある「名前」などの文字を消したら、付属画像のようにフォームが、なぜか横に並ぶのですが、これを縦に並べたいのですが、どうしたらよいでしょうか？
困っています。cssの #bangouの下にある♯の所も、字数制限のため、文字カットしています。 #bangouと全く同じCSSです。

回答よろしくお願いいたします。
コードは以下です。

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8"/>
<title></title>

<style type="text/css">
*{margin: 0;}

/* 画像と文字の背景色の設定 */
.wrap{
width: 100%;
margin:0 auto;
}

/* 入力フォームの位置 */
.auto-style1 {
text-align: center;
}

/* セレクトボックスの位置 */
.auto-style2 {
text-align: center;
}

</style>

</head>
<body>

<div class="wrap">
<div class="flex">

<div><p><img src="senden2.png" alt="［写真］" class="example3"> </p></div>
<div class="title3">
<p>様々なものがります。</p>

<div class="title5">※お申し込みフォーム</div>

<form action="form1.php" method="post">

<div class="auto-style2">

<span class="selectbox">
<select id="plan" class="plan" name="plan">
<option value="">選択</option>
</select>
</span>
</div>

<div class="auto-style1">
<input type="text" class="bangou" name="bangou" id="bangou" value=""/>

<input type="text" class="name" name="name" id="name" value=""/>

<input type="text" class="gurigana" name="furigana" id="furigana" value="" />

<input type="text" class="tel" name="tel" id="tel" value="" />

</form>
</body>
</html>

◎◎◎ｃｓｓのコード

/* 画像の横に文字を配置する */
.flex{
display: flex;
padding: 10px;
}
.flex div{
width: 50%;
}

/* セレクトボックスのデザイン1 */
#plan{
vertical-align: middle;
box-sizing: border-box;
border: 3px solid #63e02d; /* 枠線 */
width: 27.1em;
height: 53px;
line-height: 1.2; /* 行の高さ */
}

/* 入力フォームのスタイル */
#bangou {
border: 3px solid #63e02d;
padding: 0.5em;/* 内側の余白量 */
width: 25.5em;
height: 30px;
line-height: 1.2;/* 行の高さ */
}

#name {
}

#furigana {
}

#tel {
}

#email {
}

form{margin-top: 110px;
}

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： naokita
回答日時：2021/06/25 09:55

昨日も質問してた人ですね。

input{display:block;}

意味は、インライン要素というデフォルトでは、横に並ぶコンテンツを
ブロック要素という横に並ばないコンテンツにする命令

＞入力フォームの縦の位置がずれたので、
A
縦がズレようが、そこはかわらないはず。
横幅が広くなったからじゃないの？

width: 25.5em;
をもっと大きく（長く）しても横並びにならない。
幅が大きければ、横に並ぶ訳がないでしょ
（ドアを通る時に、２人ぐらいなら通れるけど、マツコデラックスはデカイから通れないでしょ）

-----------------------
というか、そんな単純なCSSで、レスポンシブ対応はどうするんでしょうね・・・

ちなみに、
*{margin: 0;}なんてやるもんじゃないよ。
意味知ってる？
何でもかんでも、全部のマージンを０にするって事・・・
不要な部分には適用しなくても良いのに、無駄に最大限で設定しているって事ですよ。
そうじゃなく、マージン０にしたいパーツだけを{margin: 0;}にすれば良いだけでしょうに・・・・

意味を知らずに、勉強もせずにCSSを利用しまくると、
次から次に１つ設定すれば、１つが崩れるので、コンテンツが増えれば増えるほど、最終的に収集つかなくなるよｗ
（もっと膨大になれば、ここでも文字数オーバーで質問出来なくなるよ・・・）