* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
margin: 50px;
}
.navbar {
display: flex;
align-items: center;
justify-content: center;
color: darkgreen;
font-family: 'Vollkorn', serif;
font-size: 1.2rem;
font-weight: bold;
}
.header {
display: flex;
align-items: center;
justify-content: center;
border: 3px solid darkgreen;
}
.text {
padding: 3px 10px;
}
.checkbox {
border-left: 3px solid darkgreen;
cursor: pointer;
height: 100%;
width: 45px;
background: pink;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" integrity="sha256-2XFplPlrFClt0bIdPgpz8H7ojnk10H69xRqd9+uTShA=" crossorigin="anonymous" />
<link href="https://fonts.googleapis.com/css2?family=Vollkorn:ital,wght@1,700&display=swap" rel="stylesheet">
</head>
<body>
<div class="navbar">
<div class="header">
<div class="text">Some Text Here</div>
<div class="checkbox">
<i class="fas fa-check"></i>
</div>
</div>
</div>
</body>
</html>
我无法理解为什么border-left: 3px solid darkgreen;
上的.checkbox
不会占据其父级(即.header
)的100%高度。
我正在向.text
添加填充,并且我想以某种方式将填充也应用于.checkbox
。
我在这个问题上停留了几个小时,对纠正此问题的任何帮助将不胜感激。预先感谢!
更新
即使我将padding: 3px 0;
添加到.checkbox
,也可以解决这种情况,但是,如果屏幕尺寸缩小到.text
中的文本不能容纳的地方一条线占用两条线,再次出现相同的问题。因此,在移动设备上看起来很难看。
答案 0 :(得分:1)
您要在.text中添加一个3px的填充顶部/底部,以影响父级的高度。即使您的复选框的高度为100%,由于这种填充,它也无法到达父级的边框。 最简单的解决方案是在.checkbox中添加填充
.checkbox{
padding: 3px 0px;
}
更改
所以不要使用padding在多行上完成技巧,可以使用flex 在标头上,使用'align-items:stretch'将强制.checkbox占用其父对象的整个大小,但您也需要删除其高度(.checkbox的高度) 然后您需要将“ fa-check”居中,只需在复选框上使用flex将其居中
.header: {
align-items: stretch;
}
.checkbox{
display : flex;
align-items: center;
justify-content: center;
/* height: 100%;
padding: 3px 0px;
*/
}
答案 1 :(得分:1)
从align-items
中删除.header
,并从height:100%
中删除.checkbox
。
答案 2 :(得分:0)
这是常见的情况。这导致了很多混乱。但是它不会占据所有屏幕,因为父元素不会占据100%的高度。因此,解决方案是将所有父节点的高度设置为100%。甚至html
!
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
height: 100%;
}
body {
margin: 50px;
height: 100%;
}
.navbar {
display: flex;
align-items: center;
justify-content: center;
color: darkgreen;
font-family: 'Vollkorn', serif;
font-size: 1.2rem;
font-weight: bold;
height: 100%;
}
.header {
display: flex;
align-items: center;
justify-content: center;
border: 3px solid darkgreen;
height: 100%;
}
.text {
padding: 3px 10px;
height: 100%;
}