css - 根据设置的边距在移动设备上缩放日期选择器

Question

我需要围绕两个日期选择器设置边距。我需要根据屏幕宽度水平缩放日期选择器。破折号应始终位于容器的中心。我试过使用百分比来解决它，但我也不知道如何设置边距。两个日期选择器都需要均匀扫描并且始终具有相同的大小。有没有人知道如何巧妙地解决这个问题？

Answer 1

display: flex 将为此工作，请参阅 fiddle 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;
}