Heim >Web-Frontend >HTML-Tutorial >CSS,padding后，外div高度被撑大怎么解决_html/css_WEB-ITnose
CSS,padding后，外div高度被撑大怎么解决_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:07:221590Durchsuche
.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;} 原来这这样的，我加了个padding就成下面这样
我加了句
.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;} 是你用了浮动的原因
你可以如下控制，这里面牵涉到默认样式重置的问题，h1，p都有自带的margin,另外文字垂直居中可以拿行高来控制
<!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> 你可以如下控制，这里面牵涉到默认样式重置的问题，h1，p都有自带的margin,另外文字垂直居中可以拿行高来控制
<!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> 谢谢，淫才，哈哈
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：<!DOCTYPE> 标签的深度剖析以及使用选择_html/css_WEB-ITnoseNächster Artikel：流行时尚！21例创新的侧边栏菜单网页设计作品_html/css_WEB-ITnose