css - 标题栏完全冲到顶部的框
问题描述
我需要创建一个里面有内容的盒子。我尝试以这种方式创建盒子,但我需要的并不安静:
.main-box {
border-radius: 25px;
border: 2px solid #000;
padding: 20px;
width: 70%;
margin-left: 20%;
}
.box-title {
background-color: #5b5b39;
padding: 5px;
color: #fff;
font-weight: bold;
}
.box-content {
padding-left: 10px;
padding-right: 10px;
}
这是上面样式表的样子:
我被要求创建这样的东西:
我不希望边框和标题之间有任何空间,并且标题栏应该完全与框的顶部齐平。
解决方案
.box {
border: 1px solid black;
border-radius: 10px;
}
.header-wrapper {
border: 1px solid black;
background-color: lightblue;
border-radius: 10px 10px 0 0;
padding-left: 10px;
}
<div class="box">
<div class="header-wrapper">
<h2>Order Details</h2>
</div>
<div class="content">
<ul>
<li>item a</li>
<li>item a</li>
<li>item a</li>
</ul>
</div>
</div>
推荐阅读
- javascript - 在哪里从cordova应用上传文件以免费获取文件?
- python-3.x - 在 anaconda spyder 上导入模块时出错
- typescript - TypeScript 2.8 在 Visual Studio 2019 中不可用
- c - 为什么 printf 在终端中显示一个额外的 % 字符?
- node.js - 发布对象的猫鼬上传失败
- spring-boot - javax.validation.ValidationException: HV000064: 无法实例化 ConstraintValidator
- sql - copyfromrecordset 失败,...对象已关闭
- javascript - 从其他页面查找所有 h2 + span 中的文本并使用 jquery 附加到不同的页面
- sql - LEFT JOIN 和 GROUP BY 带来双行
- php - 如何在 PHP 中一个接一个地处理多个异常?