Css栏下方有文字

问题描述 投票:1回答:2

我正在尝试制作条形图。它用于查看已完成,未开始且不可用的调查数量。我想在栏下显示数字,如下所示:bar chart example

我已经有了酒吧:

.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 css
2个回答
2
投票

对数字进行定位需要对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>

1
投票

您已经在工具提示中完成了此操作,因此您只需重复一下。在数字上添加<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>
© www.soinside.com 2019 - 2024. All rights reserved.