当元素宽度<1时对齐中心视口，右对齐+元素宽度时滚动＆gt;视

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用于右对齐，当它变得比父元素/视口更窄时

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

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

如果您在$（文档）.ready（）发生计时问题时过早发生，并且在浏览器初始化滚动条之前，请暂停一下：

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