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

【问题标题】：Align center when element width < viewport, align right + scroll when element width > viewport元素宽度<视口时居中对齐，元素宽度>视口时右对齐+滚动
【发布时间】：2016-10-27 02:37:34
【问题描述】：

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

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

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

【问题讨论】：

元素大小是动态的吗？
你会用jQuery吗？
@Frits：是的，它是一个类别面包屑（一旦加载到页面内，它在页面调用期间将不再更改），应该：是

标签： javascript html css alignment viewport

【解决方案1】：

我有一个解决方案，如果您可以用不间断空格实体&nbsp; 替换文本中的常规空格，则该解决方案可以工作：

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

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

编辑/补充说明：我忘记了滚动功能，现在我找不到解决方案。尽管如此，我还是把这个“一半的答案”留在这里——也许其他人会想出剩下的……

【讨论】：

使用 flex 的好主意。不幸的是，最终它的行为与 float 完全一样（不可能溢出）。但谢谢你的想法！ :)
溢出是可能的（见codepen），但不幸的是滚动不是。

【解决方案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);
});

【讨论】：