Question

我正在尝试为我的一个项目制作一个简单的css进度条;但是，看起来span元素只是它内部文本的宽度，即使我设置它的宽度。我怎样才能解决这个问题，并相应地延伸？

这是我到目前为止所得到的：

<html>
<head>
<style>
    .bar {
        padding:0;
        width:300px;
        border:1px solid blue;
        overflow:hidden;
    }

    .bar span {
        padding:0;
        margin:0;
        height:100%;
        color:white;
        text-align:center;
        background-color:red;
        border:1px solid red;
    }
</style>
</head>
<body>
<div class="bar">
    <span style="width:64%;">64%</span>
</div>

Answer 1

它不起作用，因为默认情况下span是inline元素。如果要更改其宽度，请将其更改为inline-block级别元素。 (example here)

.bar span {
    padding:0;
    margin:0;
    height:100%;
    color:white;
    text-align:center;
    background-color:red;
    border:1px solid red;
    display:inline-block;    /* Added this.. */
}

inline元素的维度由“在其中呈现的内容”定义 - 这解释了您所看到的行为。要获得所需的结果，您需要使用块级元素，因为它不会出现此行为。

此[width]属性不适用于未替换的内联元素。未替换的内联元素框的内容宽度是在其中呈现的内容（在子项的任何相对偏移之前）的内容宽度。回想一下，内联框流入线框。线框的宽度由其包含块给出，但可能因浮动的存在而缩短。 - W3 reference

与this answer相关，我写了一段时间。

进度条中的跨度元素不会拉伸

1 个答案: