css - html样式继承问题，子元素没有继承父元素的边框
本文介绍了css - html样式继承问题，子元素没有继承父元素的边框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
两个小的DIV同在一个大DIV内，为什么第二个DIV没有父级的边框？
html部分
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<title>最新动态排版</title>
<link rel="stylesheet" href="css/test_test_new.css">
<link rel="stylesheet" href="css/common.css">
</head>
<body>
<div class="new_center">
<div class="new_head">
最新动态
</div>
<div class="new_list">
<div class="new_list_one">
<div class="new_list_title">发表新贴<a href="javascript:void(0)">【主板信息披露业务备忘录第10号：重大资产组媒体说明会】</a></div>
<div class="new_list_time">
08-12 13：48
</div>
</div>
<div class="new_list_one">
<div class="new_list_title">发表新贴<a href="javascript:void(0)">【主板信息披露业务备忘录第10号：重大资产组媒体说明会】</a></div>
<div class="new_list_time">
08-12 13：48
</div>
</div>
<div class="new_list_one">
<div class="new_list_title">发表新贴<a href="javascript:void(0)">【主板信息披露业务备忘录第10号：重大资产组媒体说明会】</a></div>
<div class="new_list_time">
08-12 13：48
</div>
</div>
</div>
</div>
</body>
</html>css部分
*{padding:0; margin: 0;}
body{
background: #f6f6f8;
font-size:16px;
font-family: "微软雅黑",'Helvetica Neue',Helvetica,Arial,sans-serif;
}
.fl{float:left;}
.fr{float:right;}
li{ list-style-type: none;}
a{text-decoration: none; color:#333;}
a:hover{color:#235590;}
.hidden{display: none;}
.new_center{width:822px;background: #fff;height: auto;border:1px solid red; margin:30px;}
.new_head{font-size: 16px;padding:16px;border-bottom: 1px solid #e4e4e4;}
.new_list{width: 822px;}
.new_list_one{float: left;background: #fff;width: 100%; padding: 18px 0;border-bottom: 1px solid #e4e4e4;}
.new_list_title{font-size: 16px;width: 650px; overflow: hidden; float: left;text-indent: 50px;}
.new_list_time{float: right;font-size: 14px;color: #b7b7b7;margin-right: 20px;}
.new_list_title a{color:#3366cc;}
解决方案
float样式破坏队形了，尽量少用这玩意
你的 <div class="new_list">高度为0，相当于边框只包裹了一个最新动态
多使用其他标签，比如span
这篇关于css - html样式继承问题，子元素没有继承父元素的边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
