DEMO

Question

我已经设置了一个示例，它有一个带有隐藏溢出的固定宽度元素，它向右滚动。

DEMO

HTML

<div class="nowrap">
  <div class="inner">
    START Large container, fixed width, only one row, scrolls to end if overflow happens, -------------------------> END
  </div>
</div>

CSS

body {
  font-size: 1em;
}

.nowrap {
  white-space: nowrap;
  overflow: hidden;
  width: 40em;
}

JS

$(function() {
  var $nowrap = $('.nowrap');
  var $inner = $('.inner');
  var width = $inner.width();
  $nowrap.scrollLeft(width);
});

我的问题：

是否有一种方法不需要两个嵌套元素，但只有一个元素具有相同的功能？（可能有伪元素）
是否有仅使用CSS的方式使元素显示其内容的右端？

Answer 1

我没有看到你想要达到的目标，但是对于第二个问题，你可以浮动左边的父元素并将孩子漂浮在右边，这样它就只显示了它。右端。

<强> DEMO 1

依赖于整个项目中的各种元素，您可以删除父元素。

您还可以使用绝对位置根据父元素定位元素。（在下面的演示中，我删除了父元素，因此定位是相对于视口的。）

<强> DEMO 2

CSS demo 1：

.nowrap {
    white-space: nowrap;
    overflow: hidden;
    width: 40em;
    float:left;
}
.inner {
    float:right;
}

HTML演示2：

<div class="inner">START Large container, fixed width, only one row, scrolls to end if overflow happens, -------------------------> END</div>

CSS demo 2：

.inner {
    position:absolute;
    right:50%;
    white-space: nowrap;
}

Answer 2

我不确定我是否100％跟随你，但我试了一下。

有没有一种方法，不需要两个嵌套元素，但只有一个元素具有相同的功能？（可能有伪元素）

我不明白为什么你在这里需要.nowrap。可以在.inner上设置这些属性。

是否有一种仅使用CSS的方式使元素显示其内容的右端？

只有CSS才能做到这一点，但你可以设置一个非常高的数字，如$('.inner').scrollLeft(10000000)，它就会一直向右移动。

以下是我的演示：http://jsbin.com/garig/1/edit?html,css,js,output

在具有固定宽度和隐藏溢出的元素中向右滚动

DEMO

我的问题：

2 个答案: