如何使用 css 制作自动调整大小的水平线 DIV？

Question

我有 Hour to Hour 水平线（也使用 slick jQuery plugin），它是使用多个元素创建的，如下图所示：

不幸的是，每次我缩小时，无法自动调整大小和无法响应但被打破了。我试过更改 line-0 width:100% 或 auto 的属性并添加 overflow:hidden; 但它不起作用。

HTML:

<div class="hour">
    <div id="1" class='fl'>
            <div id="this_hour" class='fl kurohige-prev jaman' data-time="11">00:00-01:00</div>
            <div class='fl line-0'></div>                   
    </div>
    <div id="2" class='fl'>
            <div id="this_hour" class='fl kurohige-prev jaman' data-time="11">01:00-02:00</div>
            <div class='fl line-0'></div>                   
    </div>
    <div id="3" class='fl'>
            <div id="this_hour" class='fl kurohige-prev jaman' data-time="11">02:00-03:00</div>
            <div class='fl line-0'></div>                   
    </div>  
    <div id="4" class='fl'>
            <div id="this_hour" class='fl kurohige-prev jaman' data-time="11">03:00-04:00</div>
            <div class='fl line-0'></div>                   
    </div>  
</div>

CSS :

.kurohige {
    border: 1px solid #fff;
    border-radius: 20px;
    color: #ffffff;
    font-family: "am";
    font-size: 18px;
    padding: 7px 10px;
    text-align: center;
}

.fl {
    float: left;
}

.line-0 {
    background: #ffffff none repeat scroll 0 0;
    height: 2px;
    margin: 18px 0; 
    width: 100px;
    overflow:hidden;
}

有没有人对此有任何建议或解决方案？我需要使用 bootstrap 来解决这个问题吗？

感谢之前...

Answer 1

如果您喜欢并且您的浏览器支持允许它，您可以使用 flexbox 解决方案来满足您的需要（您可以通过 @ css-[ 查看一个不错的 flexbox 参考=34=] here).

已编辑::

我整理了以下片段，也可以在 jsbin here.

上看到

* {
  box-sizing: border-box;
}
body {
  padding: 0;
  margin: 0;
}
.times {
  padding: 20px;
  background-color: #f00;
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
}
.times__time {
  text-align: center;
  position: relative;
  min-width: 20%;
  display: flex;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.times__time:before,
.times__time:after {
  position: absolute;
  content: '';
  top: 50%;
  margin-top: -0.5px;
  border: 1px solid white;
}
.times__time:before {
  left: 0;
  right: 50%;
  /* This must be half of the size of the label*/
  margin-right: 12.5px;
}
.times__time:after {
  right: 0;
  left: 50%;
  /* This must be half of the size of the label*/
  margin-left: 12.5px;
}

.times__time:first-of-type:before,
.times__time:last-of-type:after {
  border: none;
}

.time__time-label {
  height: 25px;
  width: 25px;
  line-height: 25px;
  text-align: center;
  border: 1px solid #000;
  border-radius: 100%;
  color: #fff;
}

<!DOCTYPE html>
<head></head>
<body>
  <div class="times">
    <div class="times__time">
      <div class="time__time-label">A</div>
    </div>
    <div class="times__time">
      <div class="time__time-label">B</div>
    </div>
    <div class="times__time">
      <div class="time__time-label">C</div>
    </div>
  </div>
</body>

如果调整输出大小，行将在项目之间延伸。我希望这是您想要的行为。

希望对您有所帮助！

如何使用 css 制作自动调整大小的水平线 DIV？

How to Make Auto Size Horizontal Line DIV using css?

javascript

jquery

html

css

slick.js