元素宽度<视口时对齐中心，右对齐+元素宽度>视口时滚动

Question

我想让一个元素居中在视口中，只要它小于视口并且可滚动+对齐，只要它比视口大。 像这样：

首先我尝试没有Javascript，但浮动和溢出正在互相敲门。 然后我尝试使用float放置一个div：在元素旁边并通过Javascript以编程方式设置它的宽度。 但是当它比视口小时，元素不会粘在右边。

我现在没有想法，任何建议都会非常受欢迎。

Answer 1

我有一个解决方案，如果你可以用非破坏空间实体替换文本中的常规空格，它就有效  ：

http://codepen.io/anon/pen/vKgydN

以下是设置的基本部分：

.x1 { /* wrapper for text container */
  display: flex;
  flex-direction: row-reverse;
  overflow: hidden;
}
.x2 { /* text container */
  flex: 0 0 auto;
  display: inline-block;
  align-items: flex-start;
  margin: 0 auto;
}

因此它是一个反向弹性容器，只有一个不允许增长或缩小的弹性项目，具有margin: 0 auto居中和align-items: flex-start当它变得比父元素/视口更窄时，右对齐的align-items: flex-start 。

编辑/补充说明：我忘记了滚动功能，现在我找不到解决方案。 不过，我在这里留下了这个“半答案” - 也许其他人想出了其余的......

Answer 2

同时我通过使用JQuery实现了期望的行为。 它并不完美，我仍然希望有一个没有Javascript的解决方案。

这就是我为使其发挥作用所做的一切。

HTML：

<div class="breadcrumb-scroller-container">
    <div class="breadcrumb-scroller">
      scroller content
    </div>
</div>

CSS：

.breadcrumb-scroller-container {
    text-align: center;
}

.breadcrumb-scroller {
    overflow: auto;
    white-space: nowrap;
}

Javascript（JQuery）：

$(document).ready(function() {
    // scroll left to a maximum of 10000px just to be sure
    $(".breadcrumb-scroller").scrollLeft(10000);
});

如果你的$（document）.ready（）发生时间问题太早，而且在浏览器初始化了滚动条之前，请给它一个短暂的延迟：

$(document).ready(function() {
    setTimeout(function() {
        $(".breadcrumb-scroller").scrollLeft(10000);
    }, 500);
});