HTMLとCSSの勉強でサイトを作っているのですが、上下に文章があり、その文章の間にフォームがあるのですが、上の文章しか枠で囲えなくて困っています。
[HTML]
<body>
<h4>題名</h4>
<p class="box">
文章1
<form method="get" action="hoge.php">
<input type="text" name="form" size="25"><input type="submit" value="実行">
</form>
文章2
</p>
</body>
[CSS]
body {
line-height: 1.5;
text-align: center;
margin-top: 30px;
}
.box {
width: 50%;
margin-left: auto;
margin-right: auto;
border: 1px #000000 solid;
}
これで、文章1しか枠に囲われません。
回答よろしくお願いします。
No.1ベストアンサー
- 回答日時:
HTMLが正しくないとブラウザが適当な解釈をします。
その結果、CSSの適用範囲が想定外になっているのでは?
↓こちらでHTMLのチェックができます。
http://openlab.ring.gr.jp/k16/htmllint/htmllint. …
エラーメッセージやその解説を見ながら、重要度の高い部分、関係していそうな部分を修正してみるといいかと思います。
そのサイトで出たエラーを参考にして、<p>で囲うのではなく<div>で囲って解決しました。いいサイトを紹介してくださりありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- HTML・CSS 私の能力からして間違っていないような気がします。 4 2022/09/30 13:24
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSSのtransform: translate(-50...
-
<pre>で折り返させる方法を教え...
-
<h1>タグの後の行間を詰めたい。
-
DIVのセンタリング
-
CSSにてコンテンツを中央へ寄せ...
-
html言語で、画像とテキストを...
-
複数のDivタグを中央ぞろえ(Dr...
-
dreamweaverのHTMLと他のマージ...
-
*{margin:0px;padding:0px;}と...
-
タイトルのみセンタリングさせたい
-
テーブルを真ん中に持ってきた...
-
CSSレイアウトでの中央寄せ
-
段落の高さを調節することは出...
-
インラインフレームの表示位置...
-
CSS(スタイルシート)で画像の縦...
-
【外部CSS】 マージン設定がIE...
-
全体のレイアウト:中央揃えに...
-
上部の余白を消すには?
-
<P>を使わずに、右寄せ(左寄せ...
-
WordPressワードプレス、新着情...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
CSSのtransform: translate(-50...
-
aタグに直接style=""で:hoverを...
-
<h1>タグの後の行間を詰めたい。
-
HTMLフォームのSELECTの幅を一...
-
インラインフレームの表示位置...
-
INPUT TEXT内の文字位置を指定...
-
コードを書いて下さい( ; ; )...
-
text-alignの解除の方法
-
FireFoxで見るとブラウザの幅に...
-
なぜ左に寄っているの?
-
端から端まで横線を引きたい
-
ホームページビルダー 空白の...
-
アップロードするサーバーによ...
-
CSSでh1とその下の文字との行間...
-
CSSの設定
-
Formタグのブロックの高さについて
-
<legend>で表示されるタイトル...
-
ie8とCSSとマウスオーバーで何...
-
chromeだけbody直下に空白が開く
-
macとwindowsのレイアウト崩れ...
おすすめ情報