给定一个嵌套的div
,父div
有一个input-group
类,我需要嵌套的div在可用的行空间或可用的下一行空闲空间中居中。
这就是我希望它在任何时候都看起来像,不管有多少标签:
.small-numeric-container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center
}
.small-numeric-container label {
margin-right: 10px;
margin-top: 10px;
}
.numeric-small {
width: 85px;
}
.box {
display: inline-block;
margin-top: 10px;
justify-content: center;
}
.rating {
position: relative;
display: flex;
flex-direction: row-reverse;
border: 1px solid #ffffff;
box-sizing: border-box;
background: linear-gradient(to right, #ff0000, #20c997, #0f5132);
}
.rating input {
display: none;
}
.rating label {
display: flex;
cursor: pointer;
width: 45px;
height: 45px;
justify-content: center;
align-items: center;
transition: 0.5s;
background: #212529;
border-right: 1px solid #ffffff;
}
.h-separator {
width: 10px;
}
.rating input[type="radio"]:hover~label,
.rating input[type="radio"]:checked~label {
background: transparent;
color: #000000;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="input-group">
<div class="small-numeric-container">
<label>
<input class="form-control numeric-small" max="15" min="2"
name="0-scale" placeholder="Scale" type="number" value="10">
</label>
</div>
<span class="h-separator"></span>
<div class="box">
<div class="rating">
<input id="rating-label-10" name="rating" type="radio">
<label for="rating-label-10">10</label>
<input id="rating-label-9" name="rating" type="radio">
<label for="rating-label-9">9</label>
<input id="rating-label-8" name="rating" type="radio">
<label for="rating-label-8">8</label>
<input id="rating-label-7" name="rating" type="radio">
<label for="rating-label-7">7</label>
<input id="rating-label-6" name="rating" type="radio">
<label for="rating-label-6">6</label>
<input id="rating-label-5" name="rating" type="radio">
<label for="rating-label-5">5</label>
<input id="rating-label-4" name="rating" type="radio">
<label for="rating-label-4">4</label>
<input id="rating-label-3" name="rating" type="radio">
<label for="rating-label-3">3</label>
<input id="rating-label-2" name="rating" type="radio">
<label for="rating-label-2">2</label>
<input id="rating-label-1" name="rating" type="radio">
<label for="rating-label-1">1</label>
</div>
</div>
</div>
1条答案
按热度按时间gijlo24d1#
看起来把flexbox放在输入组上,自动边距放在内框上就可以了。
顺便说一句,你的大部分自定义CSS都可以用flex,margins,display,borders等的Bootstrap类来替换。我建议你回顾一下这个库,这样你就知道它提供了什么。不要重新发明你已经拥有的轮子。