ホームページ >ウェブフロントエンド >htmlチュートリアル >CSSとpadding_html/css_WEB-ITnoseを適用すると外側のdivの高さが高くなる問題の解決方法
CSSとpadding_html/css_WEB-ITnoseを適用すると外側のdivの高さが高くなる問題の解決方法
- WBOYオリジナル
- 2016-06-24 12:07:221590ブラウズ
.archive-header{font-size:12px;background-color:#F7F7F7;padding: 5px 20px;margin-bottom: 1px;overflow:hidden;}.archive-header h1 a{color: #444;float:left;}.archive-header-info{font-size: 12px;color:#999;margin:-4px 0 0;} パディングを追加すると次のようになります
.archive-header p{float:left;padding: 15px 20px;} という文を追加しました 元のコードは次のとおりです:
<header class="archive-header"> <h1><a href="http://192.168.1.148/?cat=5">2222</a></h1> <p>42342342343</p></header>
字幕が欲しいだけです後ろを縦に揃えたいのですが、変更方法を教えてください。
ディスカッションへの返信（解決策）
.archive-header p{padding: 15px 20px;} float を使用したためです
次のように制御できます。これには、デフォルトのスタイルをリセットするという問題が含まれます。これには、 h1 と p が独自のマージンを持っています。さらに、テキストの垂直方向のセンタリングは行の高さによって制御できます
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>p,h1{margin:0;}.archive-header{font-size:12px;background-color:#F7F7F7;padding: 5px 20px;height:22px;line-height:22px;}.archive-header h1 a{color: #444;float:left;}.archive-header p{float:left;}</style></head><body><header class="archive-header"> <h1><a href="http://192.168.1.148/?cat=5">2222</a></h1> <p>42342342343</p></header></body></html> 次のように制御できます。これには、デフォルトのスタイルのリセットの問題が含まれます。さらに、垂直方向のセンタリングには独自のマージンがあります。テキストの高さは行の高さで制御できます
rreee
ありがとう、ふしだらな女、笑
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。