当周围的元素增长时,伪元素的大小会减小
Pseudo element reduces in size when elements around grow
我有以下标签和复选框代码,当标签内容很短时,看起来很完美:
但是,当标签变长时,复选框被“压扁”并且勾号不再在其中对齐,我如何使用 flex 创建一个更通用的解决方案?
.outter-wrapper {
width: 200px;
border: 1px solid black;
}
.wrapper {
display: inline-flex;
min-height: 1.5rem;
padding: 8px 24px 8px 0px;
width: 100%;
}
.input {
position: absolute;
z-index: -1;
visibility: hidden;
}
.label-wrapper {
line-height: 1.5rem;
}
.label {
position: relative;
margin-bottom: 0;
display: flex;
margin-left: 0;
margin-right: 24px;
flex-direction: row-reverse;
justify-content: space-between;
flex: 1;
align-items: center;
}
.label:before {
display: block;
width: 20px;
height: 20px;
content: "";
background-color: #fff;
border: 1px solid black;
border-radius: 4px;
flex: none;
}
.label:after {
position: absolute;
display: block;
height: 20px;
content: "";
background-repeat: no-repeat;
background-position: center center;
background-size: 80%;
}
input[type="checkbox"]:checked~.label::after {
background-image: url("https://cdn-icons-png.flaticon.com/512/447/447147.png");
width: 20px;
height: 20px;
top: 0;
}
<div class="outter-wrapper">
<div class="wrapper">
<input class="input" name="checkbox2" id="checkbox2" type="checkbox">
<label class="label" for="checkbox2">
<div class="label-wrapper">
Option 1Option 1Option 1Option 1Option 1
</div>
</label>
</div>
</div>
我知道 flex-wrap
可能是正确的方法,但不确定是否可以考虑使用 :before
创建“复选框”?
如果您想为弹性容器内的元素设置固定宽度,则需要 flex : none
。希望它能解决你的问题。
.outter-wrapper {
width: 200px;
border: 1px solid black;
}
.wrapper {
display: inline-flex;
min-height: 1.5rem;
padding: 8px 24px 8px 0px;
width: 100%;
}
.input {
position: absolute;
z-index: -1;
visibility: hidden;
}
.label-wrapper {
line-height: 1.5rem;
}
.label {
position: relative;
margin-bottom: 0;
display: flex;
margin-left: 0;
margin-right: 24px;
flex-direction: row-reverse;
justify-content: space-between;
flex: 1;
align-items: center;
}
.label:before {
display: block;
width: 20px;
height: 20px;
content: "";
background-color: #fff;
border: 1px solid black;
border-radius: 4px;
/* a line I added*/
flex:none;
}
.label:after {
position: absolute;
display: block;
height: 20px;
content: "";
background-repeat: no-repeat;
background-position: center center;
background-size: 80%;
}
input[type="checkbox"]:checked~.label::after {
background-image: url("https://cdn-icons-png.flaticon.com/512/447/447147.png");
width: 20px;
height: 20px;
top: 0;
}
<div class="outter-wrapper">
<div class="wrapper">
<input class="input" name="checkbox2" id="checkbox2" type="checkbox">
<label class="label" for="checkbox2">
<div class="label-wrapper">
Option 1Option 1Option 1Option 1Option 1
</div>
</label>
</div>
</div>
试试这个代码:
.outter-wrapper {
width: 200px;
border: 1px solid black;
}
.wrapper {
display: inline-flex;
min-height: 1.5rem;
padding: 8px 24px 8px 0px;
width: 100%;
}
.input {
position: absolute;
z-index: -1;
visibility: hidden;
}
.label-wrapper {
line-height: 1.5rem;
position: absolute;
left: 10px;
}
.label {
position: relative;
margin-bottom: 0;
display: flex;
margin-left: 0;
margin-right: 24px;
flex-direction: row-reverse;
justify-content: space-between;
flex: 1;
align-items: center;
}
.label:before {
display: block;
min-width: 20px;
height: 20px;
content: "";
background-color: #fff;
border: 1px solid black;
border-radius: 4px;
position:absolute;
top:0;
}
.label:after {
position: absolute;
display: block;
height: 20px;
content: "";
background-repeat: no-repeat;
background-position: center center;
background-size: 80%;
}
input[type="checkbox"]:checked~.label::after {
background-image: url("https://cdn-icons-png.flaticon.com/512/447/447147.png");
width: 20px;
height: 20px;
top: 0;
}
<div class="outter-wrapper">
<div class="wrapper">
<input class="input" name="checkbox2" id="checkbox2" type="checkbox">
<label class="label" for="checkbox2">
<div class="label-wrapper">
THis world is full of creatures
</div>
</label>
</div>
</div>
Codepen link: https://codepen.io/emmeiWhite/pen/LYjKWEw
注意: 可能需要在任何父级上使用 min-height
(如果需要),以便文本保留在输入框内
我有以下标签和复选框代码,当标签内容很短时,看起来很完美:
但是,当标签变长时,复选框被“压扁”并且勾号不再在其中对齐,我如何使用 flex 创建一个更通用的解决方案?
.outter-wrapper {
width: 200px;
border: 1px solid black;
}
.wrapper {
display: inline-flex;
min-height: 1.5rem;
padding: 8px 24px 8px 0px;
width: 100%;
}
.input {
position: absolute;
z-index: -1;
visibility: hidden;
}
.label-wrapper {
line-height: 1.5rem;
}
.label {
position: relative;
margin-bottom: 0;
display: flex;
margin-left: 0;
margin-right: 24px;
flex-direction: row-reverse;
justify-content: space-between;
flex: 1;
align-items: center;
}
.label:before {
display: block;
width: 20px;
height: 20px;
content: "";
background-color: #fff;
border: 1px solid black;
border-radius: 4px;
flex: none;
}
.label:after {
position: absolute;
display: block;
height: 20px;
content: "";
background-repeat: no-repeat;
background-position: center center;
background-size: 80%;
}
input[type="checkbox"]:checked~.label::after {
background-image: url("https://cdn-icons-png.flaticon.com/512/447/447147.png");
width: 20px;
height: 20px;
top: 0;
}
<div class="outter-wrapper">
<div class="wrapper">
<input class="input" name="checkbox2" id="checkbox2" type="checkbox">
<label class="label" for="checkbox2">
<div class="label-wrapper">
Option 1Option 1Option 1Option 1Option 1
</div>
</label>
</div>
</div>
我知道 flex-wrap
可能是正确的方法,但不确定是否可以考虑使用 :before
创建“复选框”?
如果您想为弹性容器内的元素设置固定宽度,则需要 flex : none
。希望它能解决你的问题。
.outter-wrapper {
width: 200px;
border: 1px solid black;
}
.wrapper {
display: inline-flex;
min-height: 1.5rem;
padding: 8px 24px 8px 0px;
width: 100%;
}
.input {
position: absolute;
z-index: -1;
visibility: hidden;
}
.label-wrapper {
line-height: 1.5rem;
}
.label {
position: relative;
margin-bottom: 0;
display: flex;
margin-left: 0;
margin-right: 24px;
flex-direction: row-reverse;
justify-content: space-between;
flex: 1;
align-items: center;
}
.label:before {
display: block;
width: 20px;
height: 20px;
content: "";
background-color: #fff;
border: 1px solid black;
border-radius: 4px;
/* a line I added*/
flex:none;
}
.label:after {
position: absolute;
display: block;
height: 20px;
content: "";
background-repeat: no-repeat;
background-position: center center;
background-size: 80%;
}
input[type="checkbox"]:checked~.label::after {
background-image: url("https://cdn-icons-png.flaticon.com/512/447/447147.png");
width: 20px;
height: 20px;
top: 0;
}
<div class="outter-wrapper">
<div class="wrapper">
<input class="input" name="checkbox2" id="checkbox2" type="checkbox">
<label class="label" for="checkbox2">
<div class="label-wrapper">
Option 1Option 1Option 1Option 1Option 1
</div>
</label>
</div>
</div>
试试这个代码:
.outter-wrapper {
width: 200px;
border: 1px solid black;
}
.wrapper {
display: inline-flex;
min-height: 1.5rem;
padding: 8px 24px 8px 0px;
width: 100%;
}
.input {
position: absolute;
z-index: -1;
visibility: hidden;
}
.label-wrapper {
line-height: 1.5rem;
position: absolute;
left: 10px;
}
.label {
position: relative;
margin-bottom: 0;
display: flex;
margin-left: 0;
margin-right: 24px;
flex-direction: row-reverse;
justify-content: space-between;
flex: 1;
align-items: center;
}
.label:before {
display: block;
min-width: 20px;
height: 20px;
content: "";
background-color: #fff;
border: 1px solid black;
border-radius: 4px;
position:absolute;
top:0;
}
.label:after {
position: absolute;
display: block;
height: 20px;
content: "";
background-repeat: no-repeat;
background-position: center center;
background-size: 80%;
}
input[type="checkbox"]:checked~.label::after {
background-image: url("https://cdn-icons-png.flaticon.com/512/447/447147.png");
width: 20px;
height: 20px;
top: 0;
}
<div class="outter-wrapper">
<div class="wrapper">
<input class="input" name="checkbox2" id="checkbox2" type="checkbox">
<label class="label" for="checkbox2">
<div class="label-wrapper">
THis world is full of creatures
</div>
</label>
</div>
</div>
Codepen link: https://codepen.io/emmeiWhite/pen/LYjKWEw
注意: 可能需要在任何父级上使用 min-height
(如果需要),以便文本保留在输入框内