我已经设置了一个示例,它有一个带有隐藏溢出的固定宽度元素,它向右滚动。
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);
});
答案 0 :(得分: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;
}
答案 1 :(得分:1)
我不确定我是否100%跟随你,但我试了一下。
有没有一种方法,不需要两个嵌套元素,但只有一个元素具有相同的功能? (可能有伪元素)
我不明白为什么你在这里需要.nowrap
。可以在.inner
上设置这些属性。
是否有一种仅使用CSS的方式使元素显示其内容的右端?
只有CSS才能做到这一点,但你可以设置一个非常高的数字,如$('.inner').scrollLeft(10000000)
,它就会一直向右移动。