Float:right 反转跨度的顺序答案

【问题标题】：Float:right reverses order of spansFloat:right 反转跨度的顺序
【发布时间】：2010-11-19 11:22:50
【问题描述】：

我有 HTML：

<div>
    <span class="label"><a href="/index/1">Bookmix Offline</a></span>
    <span class="button"><a href="/settings/">Settings</a></span>
    <span class="button"><a href="/export_all/">Export</a></span>
    <span class="button"><a href="/import/">Import</a></span>
</div>

和 CSS：

span.button {
    float:right;
}

span.label {
    margin-left: 30px;
}

在浏览器中，跨度以相反的顺序显示：导入导出设置。我可以通过仅更改 CSS 文件来更改顺序并保持 HTML 不变吗？

【问题讨论】：

我在这里测试了所有答案，但没有一个可以使标签在 LHS 上而其他跨度在 RHS 上“翻转”而不更改标记。请看这个：stackoverflow.com/a/18243885/703717
这对我很有用，在几个场合-> flex solution

标签： css

【解决方案1】：

这个问题的一般解决方案是要么颠倒 HTML 中右侧浮动元素的顺序，要么将它们包装在一个包含元素中，然后将其浮动到右侧。

【讨论】：

他说“我可以通过只更改css文件和按原样保留html来更改顺序吗？”
我更喜欢包含答案，这些答案概述了人们使用的相关领域的解决方案，提供了实际答案适合它的感觉。
@Marcus：没关系，但是当提问者给出特定的约束时，你真的不能忽略它。
@Marcus：随便。 "...或将它们包装在..." 读起来像是建议更改 HTML，尤其是。正如您建议在句子的前半部分更改它。
@T.J.理解，从最严格的意义上说，答案可能更集中于实际答案。但我想传达的一点是，实际上你需要对 HTML 的语义布局进行一些思考才能充分利用 CSS。

【解决方案2】：

如果您想让列表项正确对齐而不颠倒顺序不要浮动您的列表项。改为内联。 text-align: 调整你的 span

div {
    text-align:right;
}

span {
    display:inline;
}

【讨论】：

或者您可以使用display: inline-block; 来获得正确的填充

【解决方案3】：

是的，这可以通过您的确切标记来完成。

诀窍是使用direction: rtl;

标记

<div>
    <span class="label"><a href="/index/1">Bookmix Offline</a></span>
    <span class="button"><a href="/settings/">Settings</a></span>
    <span class="button"><a href="/export_all/">Export</a></span>
    <span class="button"><a href="/import/">Import</a></span>
</div>

CSS

div
{
    direction: rtl;   
}

span.label {

    float: left;
    margin-left: 30px;
}

FIDDLE

【讨论】：

而且它也会影响伪元素
不要忘记重置任何子元素的方向：div > * { direction: ltr }。
这个 hack 太脆弱了。最好浮动一个父容器。

【解决方案4】：

只需使用 display:inline-block 和 text-align:right 代替 float:right:

div { text-align:right }

span { display:inline-block }

【讨论】：

这是根据确切问题的答案 - 在某些情况下，您只能为不受您控制的 HTML 内容提供自定义 CSS。

【解决方案5】：

更新：两个轻量级 CSS 解决方案：

使用flex、flex-flow 和order：

Example1: Demo Fiddle

    div{
        display:flex;
        flex-flow: column;
    }
    span:nth-child(1){
        order:4;
    }
    span:nth-child(2){
        order:3;
    }
    span:nth-child(3){
        order:2;
    }
    span:nth-child(4){
        order:1;
    }

或者，反转 Y 比例：

Example2: Demo Fiddle

div {
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
}
span {
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
    display:inline-block;
    width:100%;
}

【讨论】：

Example #2 对于我的情况也是一个很好的解决方案，我在右侧浮动列表元素，它们是内联块，偶尔我会在列表项之间清除。因此，我的源顺序与浮动右反转。您的方法在保持正确浮动的同时反转反转。
请注意，使用order 只会更改视觉呈现顺序，并且可能会出现可访问性问题。

【解决方案6】：

div.outerclass {
  text-align: right;
}

div.outerclass .label {
  float: left;
   text-align: left;
}

【讨论】：

+1，但可能不是 all div。 :-) 所以这就留下了如何在不修改 HTML 的情况下充分定位 div 的问题。希望有足够的结构尚未证明使其成为可能。
对不起。我已经更改了问题中的 html。我还有一个跨度（class=label），它必须在屏幕的左侧。
根据两个 cmets 进行相应编辑。
所有四个链接都放在左侧。

【解决方案7】：

或者你可以使用弹性显示

div {
  display: flex;
  justify-content: flex-end;
}

<div>
  <span class="label"><a href="/index/1">Bookmix Offline</a></span>
  <span class="button"><a href="/settings/">Settings</a></span>
  <span class="button"><a href="/export_all/">Export</a></span>
  <span class="button"><a href="/import/">Import</a></span>
</div>

【讨论】：

【解决方案8】：

很简单！

div.outerclass {
    float: right;
}

div.innerclass {
    float: left;
}

【讨论】：

【解决方案9】：

回答您更新的问题：

path to div {
    text-align: right;
}
path to div span.label {
    float: left;
}

我在上面说“div 的路径”是因为您需要充分定位这个 div，它（根据您引用的代码）没有自己的类或 ID。如果我们可以通过结构来做到这一点，那不是问题。

因此，例如，如果 div 是容器中唯一的 div，其 id（例如）“导航”，则可能是：

#navigation div {
    text-align: right;
}
#navigation div span.label {
    float: left;
}

或者如果容器中有其他 div，但这是唯一的导航容器的直接子代，您可以使用子选择器代替后代选择器：

#navigation > div {
    text-align: right;
}
#navigation > div span.label {
    float: left;
}

【讨论】：

【解决方案10】：

向右浮动 div 而不是 span 元素？

【讨论】：

+1，但问题是如何在不修改 HTML 的情况下充分定位 div。希望有足够的结构尚未证明使其成为可能。
对不起。我已经更改了问题中的 html。我还有一个跨度（class=label），它必须在屏幕的左侧。

【解决方案11】：

这无需重新排列 html 即可工作，而且非常简单。这是一个工作示例：http://jsfiddle.net/dzk7c/2/

html:

<div>
    <span class="label"><a href="/index/1">Bookmix Offline</a></span>
    <span class="button"><a href="/settings/">Settings</a></span>
    <span class="button"><a href="/export_all/">Export</a></span>
    <span class="button"><a href="/import/">Import</a></span>
</div>

和css：

div {
    float:right;
}

span {
    display: inline-block;
}

【讨论】：

我不想自吹自擂，但我的解决方案实际上解决了答案问题，这与@MArcus 选择的答案不同，这表明您必须重新排列 html，但事实并非如此。如果我错了，请纠正我，当然没有难过的感觉。

【解决方案12】：

也许这个，对于某人...

http://jsfiddle.net/15abbg81/

只有水平的，可以使用：rtl/ltr of tables 应该可以在所有支持 table-cell css 的浏览器中工作

正常：

<div class="container">
    <section>1</section>
    <article>2</article>
    <aside> <span>א</span><span>.</span> </aside>
</div>
<style>
.container { display: table; 
    direction:ltr; /*ltr here is not required*/
    }
.container>* {
    display: table-cell; /*only works with table-cell*/
    direction:ltr; /*ltr here is not required*/
}
</style>

反向：

<div class="reverse">
    <div class="container">
        <section>1</section>
        <article>2</article>
        <aside> <span>א</span><span>.</span> </aside>
    </div>
</div>

<style>
    .reverse .container { display: table;  direction:rtl } /*change the outside direction to rtl*/
    .reverse .container>* {
        display: table-cell;
        direction:ltr /*inside switch back to ltr if needed*/
    }
</style>

【讨论】：

【解决方案13】：

这可以通过使用弹性边距定位来实现。请注意，这仅适用于 IE10+

div
{
    display: flex;  
}

span.label {
    margin: auto;
    margin-left: 0;
}

span.button {    
    margin-right: 5px;
}

【讨论】：

【解决方案14】：

我也被这个卡住了......所以这是我的解决方案

我有这个Before，想要这个After

HTML 看起来像这样

<ul class="visible-xs restaurant-thumbnail__tags list-inline">
    @foreach($restaurant->categories as $category)
        <li>{{ $category->title }}</li>
    @endforeach
    @foreach($restaurant->labels as $label)
        <li>{{ $label->title }}</li>
    @endforeach
</ul>

CSS 看起来像这样

.restaurant-thumbnail__tags {
    direction: rtl;
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
}
.restaurant-thumbnail__tags li {
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
}

【讨论】：

【解决方案15】：

html

<div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>

css

div{ 
    width:300px; 
    border:1px solid #000; 
    overflow:hidden; 
}
ul{
    padding:0;
    margin:0;
    float:right;
}
li{
    border:1px solid #000;
    text-align:center;
    float:left;
    margin:20px 5px;
    padding:5px;
    width:25px;
    list-style:none;
}

【讨论】：

为什么要把span改成li，也请解释一下？

【解决方案16】：

您需要将跨度向左浮动，并将父容器向右浮动。

这将取决于您尝试实现的布局类型。

这是预期的行为，为了屏幕阅读器和我想象的类似的东西。另一种选择是调整加价，但正如你所说，这可能是不可取的。

【讨论】：