简体   繁体   English

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

[英]Align center when element width < viewport, align right + scroll when element width > viewport

I'd like to have an element centered inside a viewport as long as it is smaller than the viewport and scrollable + aligned right as long as it is bigger than the viewport. 我想让一个元素居中在视口中,只要它小于视口并且可滚动+对齐,只要它比视口大。 Like this: 像这样:

在此输入图像描述

在此输入图像描述

First I tried without Javascript, but float and overflow are knocking each other out. 首先我尝试没有Javascript,但浮动和溢出正在互相敲门。 Then I tried putting a div with float:right next to the element and setting it's width programatically through Javascript. 然后我尝试使用float放置一个div:在元素旁边并通过Javascript以编程方式设置它的宽度。 But the element wouldn't stick to the right when it's smaller than the viewport. 但是当它比视口小时,元素不会粘在右边。

I'm out of ideas now, any suggestions would be very welcome. 我现在没有想法,任何建议都会非常受欢迎。

I have a solution, which works if it's possible for you to replace the regular spaces inside the text with non-breaking-space entities &nbsp; 我有一个解决方案,如果你可以用非破坏空间实体替换文本中的常规空格,它就有效&nbsp; :

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

Here is the essential part of the settings: 以下是设置的基本部分:

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

So it's a reverse flex container with only one flex item which is not allowed to grow or shrink, has margin: 0 auto for centering and align-items: flex-start for right alignment when it's becoming narrower than the parent element/viewport. 因此它是一个反向弹性容器,只有一个不允许增长或缩小的弹性项目,具有margin: 0 auto居中和align-items: flex-start当它变得比父元素/视口更窄时,右对齐的align-items: flex-start

EDIT/additional remark: I forgot about the scrolling ability, and right now I can't find a solution for it. 编辑/补充说明:我忘记了滚动功能,现在我找不到解决方案。 Nevertheless, I leave this "half answer" here - maybe someone else comes up with the rest.... 不过,我在这里留下了这个“半答案” - 也许其他人想出了其余的......

Meanwhile I have achieved the desired behaviour by utilizing JQuery. 同时我通过使用JQuery实现了期望的行为。 It's not perfect and I still wish there would be a solution without Javascript. 它并不完美,我仍然希望有一个没有Javascript的解决方案。

Here's what I've done to make it work. 这就是我为使其发挥作用所做的一切。

HTML: HTML:

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

CSS: CSS:

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

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

Javascript (JQuery): Javascript(JQuery):

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

If you have timing issues with $(document).ready() firing too early and before the scroller has been initialized by the browser, give it a short delay: 如果你的$(document).ready()发生时间问题太早,而且在浏览器初始化了滚动条之前,请给它一个短暂的延迟:

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM