Question

我想要拥有的是一条带有点的线。我试图让它成为一个进度条，但它需要均匀分布点，margin:auto不会这样做。

你可以看到进度条实际上已经填满了20％，但是它与20％的点不匹配，因为这些点没有均匀分布，有什么办法可以解决这个问题吗？

Answer 1

Edit2：方法2

使用flex

.bar-outer {
    width: 100%;
    height: 15px;
    background: grey;
}

.bar-inner {
    height: 100%;
    width: 80%;
    background: green;
}

.point-holder {
    display: flex;
    justify-content: flex-start;
}

.point {
    flex-basis: 20%;
    position: relative;
}

.point::after {
    content: attr(content);
    position: absolute;
    right: 0px;
    background: red;
    padding: 3px;
    transform: translateX(50%);
    color: white;
}

<div class="progress-bar-holder">
    <div class="bar-outer">
        <div class="bar-inner"></div>
    </div>

    <div class="point-holder">
        <div class="point" content="20%"></div>
        <div class="point" content="40%"></div>
        <div class="point" content="60%"></div>
        <div class="point" content="80%"></div>
    </div>
</div>

原答案：方法1

但这不是保证金的运作方式。

在这里，我使用position:absolute和transform:translateX进行文本居中。

.bar-outer {
    width: 100%;
    height: 15px;
    background: grey;
}

.bar-inner {
    height: 100%;
    width: 20%;
    background: green;
}

.point-holder {
    position: relative;
    /* display:flex; */
}

.point {
    position: absolute;
    transform: translateX(-50%);
    background: red;
    color: white;
    padding: 3px;
}

.point:nth-child(1) {
    left: 20%;
}

.point:nth-child(2) {
    left: 40%;
}

.point:nth-child(3) {
    left: 60%;
}

.point:nth-child(4) {
    left: 80%;
}

<div class="progress-bar-holder">
  <div class="bar-outer">
    <div class="bar-inner"></div>
  </div>
  
  <div class="point-holder">
    <div class="point">20%</div>
    <div class="point">40%</div>
    <div class="point">60%</div>
    <div class="point">80%</div>
  </div>
</div>

Answer 2

刚刚在我的库中找到了一些旧的Javascript代码。它将完成负载条平滑“加载”的工作。

    for (int i = 0; i < countries.length; i++)
    {
        for(int j = 0; j < split_str.length; j++)
        {
            if(countries[i].substring(0, (countries[i].length() / 2) + 1).contains(split_str[j]))
            {
                for (int k = 0; k < split_str.length; k++)
                {
                    if (countries[i].substring((countries[i].length() / 2) + 1, countries[i].length()).contains(split_str[k]))
                    {
                        System.out.println(i);
                    }
                }
            }
        }
    }

Answer 3

div实际上是均匀分布的，但内部的百分点不是。

margin:auto;均匀地间隔div并将百分比值放在中间。

一个简单的解决方法是左边填充它们，因为div的最右边是20％的边距。因此，您可以尝试margin:auto;而不是margin-left:17%，而不是while True: if pin==1: count +=1 else: count=0。为了使它每次都完美，即使字体改变了，你可能需要使用Javascript。

请注意，这可能在移动设备上显示不正确。

https://jsfiddle.net/qj2dwp89/3/

Answer 4

稍微修改以清除20％的标记。如果你看看这个jsfiddle，你会发现它更清楚。

https://jsfiddle.net/50b0qjgg/1/

.bar-outer {
    width: 100%;
    height: 15px;
    background: #ededed;
}

.bar-inner {
    height: 100%;
    width: 20%;
    background: lightgreen;
}

.point-holder {
    position: relative;
}

.point {
    position: absolute;
    transform: translateX(-50%);
    background: lightcoral;
    color: white;
    padding: 3px;
}

.point:after {
 content: "";
 position: absolute;
 width: 1px;
 background-color: lightcoral;
 height: 3px;
 top: -3px;
 left: 50%;
 transform: translateX(-50%);
}

.point:nth-child(1) {
    left: 20%;
}

.point:nth-child(2) {
    left: 40%;
}

.point:nth-child(3) {
    left: 60%;
}

.point:nth-child(4) {
    left: 80%;
}

Answer 5

您就在那里，只需将justify-content: space-evenly;添加到.point-holder

即可

.point-holder {
    display: flex;
    justify-content: space-evenly; /* add */ 
}

并且很高兴您修复div的宽度（.point）并移除margin: auto，这是不需要的。

.point{
  background:red;
  margin:auto; /* remove */ 
  color:white;
  padding:3px;
  width: 24px; /* add */ 
  font-size: 12px /* add */ 
}

利润率均匀分布

5 个答案: