Question

我试图让我的页面显示一些垂直居中的行，并希望它们占据页面的整个宽度，但问题是如果页面有额外的行，页面会搞砸页面最小化。我如何解决这个问题，因为要为每个屏幕高度检测适当数量的线路太难了？

预期行为：

|-------------------------|
|                         |
|||||||||||||||||||||||||||
|                         |
|-------------------------|

我得到的行为：

|-------------------------|
|                         |
| |||||||||||||||||||||||||
| |||||||||               |
|-------------------------|

我的代码：

<style>
body{
    background-color: #b5ff8e;
}


hr{
    display: inline-block;
    height: 500px;
    width: 40px;
}

.bars {
    right: 50%;
    bottom: 50%;
    transform: translate(50%,50%);
    position: absolute;
    width: 100%;
}

</style>        


<div class="bars">

<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
</div>

Answer 1

仅使用css实现此目的：

主要目标是防止容器由内容（hr元素）确定包装。

要实现这一点，需要指定高度，与hr元素相同的高度和overflow：hidden来剪切内容。

body{
    background-color: #b5ff8e;
}


hr{
    display: inline-block;
    height: 500px;
    width: 40px;
}

.bars {
    height: 500px; // same as hr height
    overflow: hidden; // clip content
    right: 50%;
    bottom: 50%;
    transform: translate(50%,50%);
    position: absolute;
    width: 100%;
}

https://codepen.io/AugustinF/pen/WzdRpj

Answer 2

将宽度设置为％＆＃39;而不是设置像素。所以你可能想要2％的东西。使用javascript递增它。但为什么呢。

在HTML页面中设置适量的条形图

2 个答案: