Question

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

＆＃13;

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

＆＃13;

<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;

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

Answer 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/

使用右侧

1 个答案: