利润率均匀分布

时间:2017-07-29 18:07:42

标签: html css

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

JSFIDDLE:https://jsfiddle.net/qj2dwp89/

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

5 个答案:

答案 0 :(得分: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:absolutetransform: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>

答案 1 :(得分:0)

刚刚在我的库中找到了一些旧的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);
                    }
                }
            }
        }
    }

答案 2 :(得分:0)

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/

答案 3 :(得分:0)

稍微修改以清除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%;
}

答案 4 :(得分:0)

您就在那里,只需将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 */ 
}