CSSとpadding_html/css_WEB-ITnoseを適用すると外側のdivの高さが高くなる問題の解決方法-htmlチュートリアル-php.cn

CSSとpadding_html/css_WEB-ITnoseを適用すると外側のdivの高さが高くなる問題の解決方法

WBOY

リリース： 2016-06-24 12:07:22

オリジナル

1613 人が閲覧しました

.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

ありがとう、ふしだらな女、笑