使用右侧

时间:2017-01-23 21:22:38

标签: html css css-float

我需要像这样显示数据列表



.mycontent-bottom {
  border-bottom: 1px solid #ccc;
}
#float-right{
  float: right;
}

<div class="mycontent-bottom">
  <a href="">Title</a>
  <span id="float-right">50000</span>
</div>
<div class="mycontent-bottom">
  <a href="">lorem ipsum yang lazim digunakan adalah: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis</a>
  <span id="float-right">50000</span>
</div>
&#13;
&#13;
&#13;

问题是第二个问题,如果文字太长,它会将数字推到底部边框之外。任何想法如何隐藏长文本,以便数字保持在正确的位置并且不会被推到境外?

1 个答案:

答案 0 :(得分:1)

你可以试试这个:

https://jsfiddle.net/Lboxddh9/5/

.mycontent-bottom {
  border-bottom: 1px solid #ccc;
  display: inline-block;
  width: 100%;
}
#float-right{
  float: right;
}

此外,您不应在一页中为多个元素使用相同的id

这就是为什么,这是正确的,而原始标记无效。

<div class="mycontent-bottom">
  <a href="">Title</a>
  <span class="float-right">...</span>
</div>
<div class="mycontent-bottom">
  <a href="">...</a>
  <span class="float-right">...</span>
</div>

更新了class而非多个id的小提琴:

https://jsfiddle.net/Lboxddh9/7/