Question

我正在尝试制作一种填充的进度条，其中的文本位于左侧，中间位置，右侧则为SOMETIMES。

我得到了（差不多）工作，到目前为止我唯一的问题是有时候中间的文字太长了，所以它会跨越div。这意味着它包裹着，并且需要2行，但主div中仍然存在。

这是代码，也许有人可以帮我解决这个问题并稍微改进一下：

<div class="progress progressSize">
    <div style="width: 50%;" class="progressFill"></div>
    <div class="progressText">
        <span class="leftText">Left Text</span>
        <span class="centerText">Center text that gets too long</span>
        <span class="rightText">Right Text</span>
    </div>
</div>

对于CSS：

.progress {
    border: 1px solid #004b91;  
    background-color: #FFFFFF;
    position: relative;
}

.progressSize {
    width: 500px;
    height: 20px;
}

.progressFill {
    background-color: #EAF3FE;
    height: 100%;
    position: absolute;
}

.progressText {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 2px;
    position: relative;
}

.leftText {
    float: left;
    width: 33%;
}

.centerText {
    float: left;
    text-align: center;
    width: 33%;
}

.rightText {
    float: right;
    text-align: right;
}

所以我的问题在于centerText。中间的文字太大，所以它跨越2行，但它不足以填满整个栏。因为我为每个文本保留33％：左，中，右文本，中心文本放在中间，但它有一个“绑定”。

我不确定如何解决这个问题。有人可以帮帮我吗？

谢谢，

鲁迪

Answer 1

也许overflow:hidden与height:1em结合会有帮助吗？这将裁剪太长的文本。

.centerText {
  float: left;
  text-align: center;
  width: 33%;
  overflow:hidden;
  height: 1em;
}

Answer 2

你的procressSize CSS应该是：

.progressSize {
    width: 500px;
    min-height:20px;
    height: auto;
    overflow:auto;
}

这会增加进度div的高度以包含文本

编辑，但是如果你想让div高度保持不变，那么对于centerText div，不要有宽度：33％，并按照我提到的方式保持progressSize CSS

.progressSize {
    width: 500px;
    min-height:20px;
    height: auto;
    overflow:auto;
}

.centerText {
    float: left;
    text-align: center;
    min-width: 33%; // initially, width:33%
    height:auto;
}

最小宽度只是最小宽度，因此div不会缩小到33％以下（但它在IE6中不起作用）

Answer 3

使用浮动来解决这个问题的一个替代方法是使用绝对和相对定位，我发现 - 我需要在没有浮动的情况下执行此操作，这有助于我解决我的问题问题。

http://www.bennadel.com/blog/2541-most-css-floats-can-be-replaced-with-relative-and-absolute-positioning.htm

在DIV中对齐3个文本（左，中和右）

3 个答案: