html - CSS - 将文本与 div 对齐
问题描述
我正在努力将文本与 div 对齐。
我目前有这个:
但我想实现这一点(我刚刚编辑了一个截图来告诉你我的意思):
我的代码如下所示:
HTML
<div class="regionHeader">
<div class="regionArrow"></div>
<h2>Some long header that should be aligned to the left next to the div with arrow</h2>
</div>
CSS
.regionHeader {
border-bottom: 1px solid #ffd800;
cursor: pointer;
}
.regionArrow {
border-right: 4px solid #ffd800;
border-bottom: 4px solid #ffd800;
width: 13px;
height: 13px;
transform: rotate(45deg);
float: left;
margin-top: 11px;
margin-right: 13px;
margin-bottom: 0px;
margin-left: 3px;
}
h2 {
font-family: changa-regular;
font-size: 2em;
}
我已经玩过显示和浮动,但它要么不起作用,要么我做错了。
解决方案
您可以简单地padding-left
在标题上使用 a :
.regionHeader {
border-bottom: 1px solid #ffd800;
cursor: pointer;
}
.regionArrow {
border-right: 4px solid #ffd800;
border-bottom: 4px solid #ffd800;
width: 12px;
height: 13px;
transform: rotate(45deg);
float: left;
margin-top: 11px 13px 0 3px;
}
h2 {
font-size: 2em;
padding-left: 1.2em; /* <- added */
}
<div class="regionHeader">
<div class="regionArrow"></div>
<h2>Some long header that should be aligned to the left next to the div with arrow</h2>
</div>
或者使用 flexbox 方法并删除float
.
.regionHeader {
border-bottom: 1px solid #ffd800;
cursor: pointer;
display: flex; /* <- added */
}
.regionArrow {
border-right: 4px solid #ffd800;
border-bottom: 4px solid #ffd800;
width: 16px;
height: 13px;
transform: rotate(45deg);
margin: 30px 15px;
}
h2 {
font-family: changa-regular;
font-size: 2em;
}
<div class="regionHeader">
<div class="regionArrow"></div>
<h2>Some long header that should be aligned to the left next to the div with arrow</h2>
</div>
浏览器对 flexbox的支持非常好。不要忘记添加适当的供应商前缀。
推荐阅读
- c# - asp.net MVC 不显眼的浏览器错误
- javascript - axios post请求参数到后端未定义
- dialogflow-es - 状态码为 401 的响应正文
- html - 具有动态内容的两个相邻 DIV。一个包装内容,另一个滚动溢出
- python - 在主循环中使用 serial.readline() 清空文件
- spring-boot - Spring Boot MyBatis:通过配置支持 java.util.Optional
- javascript - 如何使用 Java Script 获取 window.opener 的 URL
- graphql - 带有输入类型的 GraphQL Apollo 变异
- c - 从列表中删除元素
- javascript - 如何在 HTML 页面中嵌入 PDF?