HTML CSS-元素的宽度大于100%的宽度

时间:2018-10-18 12:05:39

标签: html css

我尝试将工具提示附加到元素的列表/ div块-但是这些元素的宽度设置为100%。我想拥有它,因此工具提示与列表/句子中的最后一个单词仅相距几px。

enter image description here

1 个答案:

答案 0 :(得分:1)

仅执行html + css,您需要将每行都包装在div中,例如

.gray-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: red;
}

.line {
  display: inline-block;
  position: relative;
}

.tooltip {
  display: inline-block;
  position: absolute;
  background: black;
  width: 30px;
  height: 20px;
  margin-left: 10px;
}
<div class="gray-container">
  <div class="line"><input type="radio">None<div class="tooltip"></div></div>
  <div class="line"><input type="radio">Two</div>
  <div class="line"><input type="radio">Three</div>
  <div class="line"><input type="radio">Four</div>
</div>

现在出于演示目的,并且由于我不知道用于创建工具提示的方法,因为您没有发布代码,因此我正在使用带有class="tooltip"的div,但这解决了您的div是100%的问题。