html - :在尊重父母的填充之前
问题描述
我正在尝试在a
带有background-image
.
但是,我无法让a:before
盒子尊重a
' 的填充。
下面片段中的第一个示例是 using width
,height
但display: block
根本没有显示任何内容。
position: absolute
所以,我在第二个例子中尝试了。显示了徽标,但不尊重a
' 填充。
如何使徽标适合的填充内a
?
当前的
预期的
我想避免做的事
由于响应式设计要求,我希望徽标的大小根据a
元素大小进行更改。因此,以下是我想避免的一些事情。
- 使用固定值来适应
.logo:before
内部a
的填充。 - 修改
a
样式
*, ::before, ::after {
box-sizing: border-box;
}
body { margin: 0; }
.container, .container > p, .container > .logo {
display: flex;
}
.container {
align-items: center;
justify-content: space-between;
margin-left: 2rem;
margin-right: 2rem;
}
.container > p, .container > .logo {
flex-basis: auto;
flex-grow: 1;
align-items: center;
}
.logo {
position: relative;
padding-top: .3125rem;
padding-bottom: .3125rem;
color: transparent !important;
}
.logo:before {
content: '';
background: url('https://via.placeholder.com/150x100/FF0000/000000') no-repeat;
background-size: contain;
width: 100%;
height: 100%;
display: block;
}
.logo.absolute:before {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
<div class="container">
<a class="logo">Logo</a>
<p>Navigation links</p>
</div>
<div class="container">
<a class="logo absolute">Logo</a>
<p>Navigation links</p>
</div>
解决方案
由于.logo:before
's是一个空字符串,除非用固定值明确定义,content
否则不会显示任何内容。height
content: ' '
可以解决问题,但这只是一个补丁而不是根修复。
根本原因是由于它将中间的内容与其所需的最小高度垂直对齐align-items: center
。.container
与空元素的组合content
根本.logo:before
不显示任何内容。
当前所需的行为是希望.logo
' 高度与导航链接的高度相匹配,此处无需使用align-items: center
并且normal
应该可以。
该position: absolute
方法将始终忽略填充。
*, ::before, ::after {
box-sizing: border-box;
}
body { margin: 0; }
.container, .container > p, .container > .logo {
display: flex;
}
.container {
align-items: normal;
justify-content: space-between;
margin-left: 2rem;
margin-right: 2rem;
background-color: gray;
}
.container > p, .container > .logo {
flex-basis: auto;
flex-grow: 1;
align-items: center;
}
.logo {
position: relative;
padding-top: .3125rem;
padding-bottom: .3125rem;
color: transparent !important;
}
.logo:before {
content: '';
background: url('https://via.placeholder.com/150x100/FF0000/000000') no-repeat;
background-size: contain;
width: 100%;
height: 100%;
}
<div class="container">
<a class="logo">Logo</a>
<p>Navigation links</p>
</div>
推荐阅读
- python - 如何在 sqlalchemy (python) 中使新实例创建更通用?
- java - 有没有更好的方法来准确使用地理围栏而不编写我自己的位置请求服务?
- python - Python - 使用 ffplay 播放视频以更大的分辨率显示文件
- bash - 如何在一个包含 3000 行长的文件中屏蔽每行的 200 个字符?
- c# - Wpf 将文本替换为 RichTextBox
- sql - postgresql:创建确定日期差异的函数的语法错误
- python - boto3在s3文件上传期间处理ClientError
- pass-by-reference - 关于 What's In the Box 代码游戏作业的问题
- javascript - 这叫什么(JS)
- java - 如何格式化常规日期时间+0000