根据设定的保证金在移动设备上缩放日期选择器

Question

我需要围绕两个日期选择器的固定余量。我需要根据屏幕宽度水平缩放日期选择器。短划线应始终位于容器的中心。我试过用百分比来解决它，但我也不知道如何设置边距。两个日期选择器都需要均匀扫描并始终具有相同的大小。有人知道如何以一种巧妙的方式解决这个问题吗？

Answer 1

display: flex适用于此，请参阅小提琴https://jsfiddle.net/sxh0n7d1/5/

很难说出你在问什么，但这是另一种方法https://jsfiddle.net/sxh0n7d1/6/

或者：https://jsfiddle.net/sxh0n7d1/7/

选择一个，我将解释它是如何完成的。

示例html

<div class="wrapper">
  <div class="div1">

  </div>
  <div class="line">

  </div>
  <div class="div2">

  </div>
</div>

示例css

.wrapper {
  width: 100%;
  height: 50px;
  border-style: dotted;
  display: flex;
  justify-content: space-between;
}
.line {
  width: calc(100% - 320px);
  border-bottom: solid;
  border-bottom-width: 1px;
  margin-bottom: 25px;
}

.div1,
.div2 {
  width: 100px;
  height: 40px;
  border-style: solid;
  border-color: red;
  margin: 0 30px;
}