CSS - 池调查表

Question

嘿伙计们我想尝试这样的事情：

外观如何：

实际看起来如何：

CSS

h1{
    font-size: 16px;
}

.bar{           
    width:170px;
    background-color: #ccc;
    border: 1px solid #ccc;
    height: 17px;
    margin-left: 15px;
}

.progress{
    background-image: url("images/survey_bar.png");
    background-repeat: repeat-x;
    padding: 5px;
    text-align: right;
    height: 17px;
}

.label{
    margin-bottom: 15px;
    margin-left: 15px;
}

HTML

<div class="bar">
    <div class="progress" style="width:75%;">65%</div>
</div>
<div class="label">Dominik !</div>
<div class="bar">
    <div class="progress" style="width:20%;">20%</div>
</div>
<div class="label">Jenda</div>
<div class="bar">
    <div class="progress" style="width:15%;">15%</div>
</div>
<div class="label">Lojza</div>

你看到它的差异，它的文字颜色，但主要是在那个数字％的位置 有人可以帮我解决吗？我尝试填充/保证该文本，但只是无法解决它。

Answer 1

只需添加color:#fff即可解决颜色，这不是一个大问题。

关于定位，请尝试添加line-height:17px（即匹配您的height）。这将使文本在栏上垂直居中。

Answer 2

您需要删除padding:5px;中的.progress{}并添加color:white;

.progress{
    background-image: url("images/survey_bar.png");
    background-repeat: repeat-x;
    padding:5px;          /* delete this */
    text-align: right;
    height: 17px;
    color:#fff;     /* add this */
}

<强> DEMO

Answer 3

我改变了一些方法来实现这一目标。

• 从.progress中删除了填充，因为它只会溢出div
• 将文字颜色更改为白色
• 添加行高：17px; .progress垂直居中div
• 在.progress之后添加了空格，因此文字不在div的边缘

这里是新的CSS

.bar{           
    width:170px;
    background-color: #ccc;
    border: 1px solid #ccc;
    height: 17px;
    margin-left: 15px;
}

.progress{
    background-image: url("images/survey_bar.png");
    background-repeat: repeat-x;
    color: #fff;
    text-align: right;
    height: 17px;
    line-height: 17px;
}

.progress:after {
    content: "\00a0";
}

.label{
    margin-bottom: 15px;
    margin-left: 15px;
}

Answer 4

您需要删除填充。这导致错误。

padding:0;