我正在尝试制作条形图。它用于查看已完成,未开始且不可用的调查数量。我想在栏下显示数字,如下所示:
我已经有了酒吧:
.bar {
height: 2em;
display: flex;
border: 3px solid darkgrey;
border-radius: 1px;
background-color: #484848;
background-image: linear-gradient(to top, #535353, #919191);
background-repeat: repeat-x;
}
.div1 {
height: 2em;
width: 50%;
background-color: #65ea4e;
background-image: linear-gradient(to top, #5abe43, #64ed4e);
background-repeat: repeat-x;
}
.div1:hover {
content: 'Klaar';
}
.div2 {
height: 2em;
width: 20%;
background-color: red;
background-image: linear-gradient(to top, darkred, red);
background-repeat: repeat-x;
}
.div1:hover .tooltiptext {
visibility: visible;
}
.div2:hover .tooltiptext {
visibility: visible;
}
.tooltiptext {
position: relative;
display: inline-block;
visibility: hidden;
margin-top: 2em;
background-color: #484848;
color: white;
padding: 3px;
border-radius: 5px;
}
<div class="bar">
<div class="div1">5<span class="tooltiptext">Aantal afgemaakte enquêtes</span></div>
<div class="div2">2<span class="tooltiptext">Aantal niet afgemaakte enquêtes</span></div>
</div>
所以我需要添加或更改以使我的条形与照片中的条形相同吗?
对数字进行定位需要对HTML的结构进行较小的更改,然后这是绝对定位和转换的问题。
.bar {
height: 2em;
display: flex;
margin: 1em;
border: 3px solid darkgrey;
border-radius: 1px;
background-color: #484848;
background-image: linear-gradient(to top, #535353, #919191);
background-repeat: repeat-x;
}
.bar>div {
position: relative;
}
.bar>div .value {
position: absolute;
display: inline-block;
bottom: -25px;
transform: translateX(-50%);
}
.div1 {
height: 2em;
flex: 0 050%;
background-color: #65ea4e;
background-image: linear-gradient(to top, #5abe43, #64ed4e);
background-repeat: repeat-x;
}
.div2 {
height: 2em;
flex: 0 0 20%;
background-color: red;
background-image: linear-gradient(to top, darkred, red);
background-repeat: repeat-x;
}
<div class="bar">
<div class="div1">
<span class="value">5</span>
</div>
<div class="div2">
<span class="value">2</span>
</div>
</div>
您已经在工具提示中完成了此操作,因此您只需重复一下。在数字上添加<span>
并应用类似的样式:
.bar {
height: 2em;
display: flex;
border: 3px solid darkgrey;
border-radius: 1px;
background-color: #484848;
background-image: linear-gradient(to top, #535353, #919191);
background-repeat: repeat-x;
}
.div1 {
height: 2em;
width: 50%;
background-color: #65ea4e;
background-image: linear-gradient(to top, #5abe43, #64ed4e);
background-repeat: repeat-x;
}
.div2 {
height: 2em;
width: 20%;
background-color: red;
background-image: linear-gradient(to top, darkred, red);
background-repeat: repeat-x;
}
.div1:hover .tooltiptext {
visibility: visible;
}
.div2:hover .tooltiptext {
visibility: visible;
}
.text {
display: inline-block;
margin-top: 2em;
}
.tooltiptext {
display: inline-block;
visibility: hidden;
background-color: #484848;
color: white;
padding: 3px;
border-radius: 5px;
}
<div class="bar">
<div class="div1"><span class="text">5</span><span class="tooltiptext">Aantal afgemaakte enquêtes</span></div>
<div class="div2"><span class="text">2</span><span class="tooltiptext">Aantal niet afgemaakte enquêtes</span></div>
</div>