使用适当的包装将元素左右对齐

Posted 2023-03-06

【中文标题】使用适当的包装将元素左右对齐

【英文标题】：Align elements left and right with proper wrapping

【发布时间】：2016-10-14 01:27:12

【问题描述】：

我是 html/CSS 的新手，我正在努力弄清楚如何让按钮工具栏与右侧对齐，但当页面宽度变大时停止向右浮动（像内联块一样环绕）更小？

目前，我将按钮向右浮动以获得我想要的右对齐效果，但浮动可能不是最好的方式。

我可以使用媒体查询，但我想知道是否有人知道更直接/标准的方式？

http://jsfiddle.net/47hsddLd

<div style="margin: 60px 20px 60px 20px;">
  <div style="display:inline-block">
    <h3>Some kind of page title</h3><br />
  </div>
  <div class="btn-group pull-right" role="group" aria-label="User Categories" style="display:inline-block">
    <button type="button" class="btn btn-default-grey btn-sm storyFilter" data-storyfilter-category="ReadLater" data-results-target="#storyList" data-toggle="tooltip" data-placement="bottom" title="Read Later">
      <i style="margin-top:4px" class="glyphicon glyphicon-bookmark" aria-hidden="true"></i>
    </button>
    <button type="button" class="btn btn-default-grey btn-sm storyFilter" data-storyfilter-category="PlanToUse" data-results-target="#storyList" data-toggle="tooltip" data-placement="bottom" title="Plan To Use">
      <i style="margin-top:4px" class="glyphicon glyphicon-pushpin" aria-hidden="true"></i>
    </button>
    <button type="button" class="btn btn-default-grey btn-sm storyFilter" data-storyfilter-category="Used" data-results-target="#storyList" data-toggle="tooltip" data-placement="bottom" title="Used">
      <i style="margin-top:4px" class="glyphicon glyphicon-check" aria-hidden="true"></i>
    </button>
    <button type="button" class="btn btn-default-grey btn-sm storyFilter" data-storyfilter-category="Submitted" data-results-target="#storyList" data-toggle="tooltip" data-placement="bottom" title="My Stories">
      <i style="margin-top:4px" class="glyphicon glyphicon-list-alt" aria-hidden="true"></i>
    </button>
  </div>
</div>

【问题讨论】：

我没有完全明白你的问题。浮动很好，除非您希望它们作为单独的行，在这种情况下，您可以在按钮包装元素上使用文本对齐。

@ArathiSreekumar 我希望它们成为单行。但是，如果宽度更小，我希望按钮在不继续向右浮动的情况下换行。如果您查看我的小提琴并拖动分隔线以缩小宽度，您会看到按钮下降到标题下的新行，但继续向右浮动

是的，在这种情况下，媒体查询可能是要走的路。但是您确实有标题长度未知的问题。您可以结合我在下面给出的解决方案和媒体查询。

你到底想要什么？我

【参考方案1】：

如果您检查元素，您会看到 Bootstrap 生成的。

.pull-right 
    float: right !important;

因此，在小屏幕的媒体查询中将其覆盖为 float:none 或 left。如果需要，您也需要申请 !important。

编辑

正如下面 cmets 中所建议的，直接覆盖 .pull-right 类可能不是一个好主意，因为它也用于其他规则，所以 .this-parent-class .pull-right ... 会更好，或者根本不使用该类.

由于您使用的是 Bootstrap，您真的应该利用内置响应式网格系统的优势，即 col-lg-* 、 col-md-* 和 col-sm-* 等用于您的布局，有一个很棒的帖子 here。

【讨论】：

所以媒体查​​询是实现这一目标的最简单方法之一？

@Michael 是的，我会在媒体查询中这样做。

IMO，更好的办法是删除引导程序的pull-right 并使用自定义类来管理断点上的不同样式。我认为我们应该避免不必要地覆盖引导类。

@Mr_Green 同意，答案只是帮助 OP 识别问题，我会在稍后更新更多建议。

【参考方案2】：

浮动很好，除非您希望它们作为单独的行，在这种情况下，您可以在按钮包装元素上使用 text-align right。将按钮移动到标题文本上方也会使标题文本换行。

<div style="margin: 60px 20px 60px 20px;">
  <div class="btn-group pull-right" role="group" aria-label="User Categories" style="margin-left: 10px">
    <button type="button" class="btn btn-default-grey btn-sm storyFilter" data-storyfilter-category="ReadLater" data-results-target="#storyList" data-toggle="tooltip" data-placement="bottom" title="Read Later">
      <i style="margin-top:4px" class="glyphicon glyphicon-bookmark" aria-hidden="true"></i>
    </button>
    <button type="button" class="btn btn-default-grey btn-sm storyFilter" data-storyfilter-category="PlanToUse" data-results-target="#storyList" data-toggle="tooltip" data-placement="bottom" title="Plan To Use">
      <i style="margin-top:4px" class="glyphicon glyphicon-pushpin" aria-hidden="true"></i>
    </button>
    <button type="button" class="btn btn-default-grey btn-sm storyFilter" data-storyfilter-category="Used" data-results-target="#storyList" data-toggle="tooltip" data-placement="bottom" title="Used">
      <i style="margin-top:4px" class="glyphicon glyphicon-check" aria-hidden="true"></i>
    </button>
    <button type="button" class="btn btn-default-grey btn-sm storyFilter" data-storyfilter-category="Submitted" data-results-target="#storyList" data-toggle="tooltip" data-placement="bottom" title="My Stories">
      <i style="margin-top:4px" class="glyphicon glyphicon-list-alt" aria-hidden="true"></i>
    </button>
  </div>
  <div>
    <h3>
        Some kind of page title
    </h3>
    <br />
  </div>

</div>

例如：http://jsfiddle.net/47hsddLd/2/

但这会使屏幕阅读器的阅读方式有所不同。

请注意，我删除了 display: inline-blocks，因为它们破坏了正常流程。

这是一个带有媒体查询的解决方案： http://jsfiddle.net/47hsddLd/4/

【参考方案3】：

听起来你想要这样：http://jsfiddle.net/zsjn7tz8/

基本方法是 flexbox 开启 flex-wrap: wrap，flex:1 在空间填充元素上，white-space: nowrap 在两个 flex 子元素上。

请注意，对于某些浏览器，您可能希望/需要 CSS 预处理或自动前缀以使“遗留”和“tweener”弹性框语法正常工作，以及供应商前缀（这是一个热点：强烈建议让工具来做，而不是创作自己）

【讨论】：

谢谢！这正是我想要的。但我担心 flexbox 的向后兼容性。所以我可能不得不使用媒体查询

我强烈建议开始在生产环境中使用 Flexbox；它变得非常普遍，并且很容易编写后备样式（例如，通过 Modernizr）以稍微不同地处理蹩脚的浏览器。并记住前端开发工作中最重要的问题：dowebsitesneedtolookexactlythesameineverybrowser.com;^D