Question

我有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原样来更改顺序吗？

Answer 1

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

Answer 2

如果您想使列表项目正确对齐而不撤消订单不要浮动您的列表项目。将它们设为内嵌。 text-align：对你的 span

div {
    text-align:right;
}

span {
    display:inline;
}

Answer 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

Answer 4

div.outerclass {
  text-align: right;
}

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

Answer 5

很容易！

div.outerclass {
    float: right;
}

div.innerclass {
    float: left;
}

Answer 6

更新：两个轻量级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%;
}

Answer 7

将div浮动而不是span元素？

Answer 8

只需使用display：inline-block和text-align：right而不是float：right：

div { text-align:right }

span { display:inline-block }

Answer 9

或者您可以使用柔性显示屏

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>

Answer 10

回答您更新的问题：

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

我之前说“div to path”因为你需要充分地定位这个div，而不是（根据你引用的代码）它有自己的类或ID。如果我们能用结构来做这件事，那不是问题。

例如，如果div是容器中唯一具有id（例如）“navigation”的div，则可能是：

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

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

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

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

Answer 12

也许这个，对某人来说......

http://jsfiddle.net/15abbg81/

只有横向，可能是使用：rtl / ltr表应该适用于所有支持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>

Answer 13

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

div
{
    display: flex;  
}

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

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

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

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

Answer 16

你需要向左浮动空间，然后向右浮动父容器。

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

这是预期的行为，为了我想象的屏幕阅读器等的好处。另一种选择是调整加价，但正如你所说，这可能并不合适。

浮动：右转逆转跨度

16 个答案:

标记

CSS

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

Example1: Demo Fiddle

Example2: Demo Fiddle