并排放置两个HTML范围输入而没有间隙并占据填充父div宽度

Question

如何使范围输入并排-它们之间没有任何间隙并占据AgeRangeDiv的整个宽度

<div class="AgeRangeDiv"><div class="AgeRangeLabel">Age Range</div><input type="range" min="18" max="55" label="Min" value="39" class="AgeRange"><span class="AgeNum"><span class="text-mute">Min</span><span class="text-success text-bold pl2">39</span></span><input type="range" min="39" max="55" label="Max" value="" class="AgeRange"><span class="AgeNum"><span class="text-mute">Max</span><span class="text-success text-bold pl2">48</span></span></div>

pv.message.setOnClickListener(v -> {});

Answer 1

我对布局结构和CSS进行了一些更改以实现它。请参见下面的代码段：

.AgeRange {
  width: 30%;
  margin-bottom: 20px;
}
.pl2 {
padding-left: 10px;
}
.AgeNum {
  position: relative;
  display: block;
  text-align: center;
}
.AgeRangeLabel {
  margin: 10px 0;
  color:#0b867a;
}
.AgeRangeDiv {
  border: 1px solid $ee;
  background: $ff;
  padding: 3px 5px 5px 12px;
  border-radius: 4px;
}
.ranges-container {
  display: flex;
}
.ranges-container .range {
  width: 50%;
}
.ranges-container .range input[type="range"] {
  width: 100%;
}

<div class="AgeRangeDiv">
  <div class="AgeRangeLabel">Age Range</div>
  <div class="ranges-container">
    <div class="range">
      <input type="range" min="18" max="55" label="Min" value="39" class="AgeRange">
      <span class="AgeNum">
        <span class="text-mute">Min</span>
        <span class="text-success text-bold pl2">39</span>
      </span>
    </div>
    <div class="range">
      <input type="range" min="39" max="55" label="Max" value="" class="AgeRange">
      <span class="AgeNum">
        <span class="text-mute">Max</span>
        <span class="text-success text-bold pl2">48</span>
      </span>
    </div>
  </div>
</div>