{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>
◎◎◎cssのコード
/* 画像の横に文字を配置する */
.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;
}
No.1ベストアンサー
- 回答日時:
昨日も質問してた人ですね。
input{display:block;}
意味は、インライン要素というデフォルトでは、横に並ぶコンテンツを
ブロック要素という横に並ばないコンテンツにする命令
>入力フォームの縦の位置がずれたので、
A
縦がズレようが、そこはかわらないはず。
横幅が広くなったからじゃないの?
width: 25.5em;
をもっと大きく(長く)しても横並びにならない。
幅が大きければ、横に並ぶ訳がないでしょ
(ドアを通る時に、2人ぐらいなら通れるけど、マツコデラックスはデカイから通れないでしょ)
-----------------------
というか、そんな単純なCSSで、レスポンシブ対応はどうするんでしょうね・・・
ちなみに、
*{margin: 0;}なんてやるもんじゃないよ。
意味知ってる?
何でもかんでも、全部のマージンを0にするって事・・・
不要な部分には適用しなくても良いのに、無駄に最大限で設定しているって事ですよ。
そうじゃなく、マージン0にしたいパーツだけを{margin: 0;}にすれば良いだけでしょうに・・・・
意味を知らずに、勉強もせずにCSSを利用しまくると、
次から次に1つ設定すれば、1つが崩れるので、コンテンツが増えれば増えるほど、最終的に収集つかなくなるよw
(もっと膨大になれば、ここでも文字数オーバーで質問出来なくなるよ・・・)
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ 5 2022/04/11 12:01
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSSに同じclass名がいっぱい‥。...
-
display:table-cell内でこんな...
-
Bootstrap 訪問済みテキストリ...
-
HTML要素のid/class名の長さに...
-
CSSの適用を一部だけ除外したい。
-
<span>で2重にかけているものを...
-
CSS, リンクの色を一部変えるに...
-
liリストタグの背景色に色がつ...
-
CSSでテキストリンクの色を複数...
-
CSSのクラス名・ID名の指定でワ...
-
オンマウス時の背景色を個別に...
-
idの中のid指定
-
htmlの文字が縦書きになる
-
HTML属性での「""」 「''」違い
-
超音波で洗脳。
-
ボタンをセル内一杯に表示させ...
-
css初心者 フレックスボックス...
-
【ヒトの神秘】美男美女から何...
-
widthやheightの数値に単位(px...
-
複数のボタンを等間隔に、かつ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
個別にリンクの色を変える方法
-
htmlのid属性って必要なの?
-
最近、HTMLのヘッダーをIDで定...
-
HTML要素のid/class名の長さに...
-
CSSに同じclass名がいっぱい‥。...
-
liリストタグの背景色に色がつ...
-
CSSのクラス名・ID名の指定でワ...
-
サイトにjQueryが使用されてい...
-
ページの左右の余白(枠外)に...
-
CSS, リンクの色を一部変えるに...
-
透過背景を解除するにはどうす...
-
<span>で2重にかけているものを...
-
idの中のid指定
-
display:table-cell内でこんな...
-
CSSが効かずどのように指定すれ...
-
スタイルシートで、id属性の中...
-
【VBA/HTML】IE画面内のページT...
-
brにクラスをつけてcssでdispla...
-
外部css定義したclassをht...
-
CSS内で使われる山括弧の意味が...
おすすめ情報