浮动：右翻转跨度的顺序
我有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文件来更改订单，并保持原样？
这个问题的一般解决scheme是颠倒HTML中正确的浮动元素的顺序，或者将它们包含在一个包含的元素中，然后将其浮动到右侧。
如果你想让你的列表项目正确alignment，而不颠倒顺序不要浮动你的列表项目。 让他们内联，而不是。 文本alignment：对你的跨度
div { text-align:right; } span { display:inline; }
是的，这可以用你的确切标记完成。
诀窍是使用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; }
小提琴
div.outerclass { text-align: right; } div.outerclass .label { float: left; text-align: left; }
浮动div而不是span元素？
好简单！
div.outerclass { float: right; } div.innerclass { float: left; }
更新：两个轻量级CSS解决scheme：
使用flex ， flex-flow和order ：
示例1：演示小提琴
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尺度：
例2：演示小提琴
div { -webkit-transform: scaleY(-1); transform: scaleY(-1); } span { -webkit-transform: scaleY(-1); transform: scaleY(-1); display:inline-block; width:100%; }
回答您更新的问题：
path to div { text-align: right; } path to div span.label { float: left; }
我在上面说“div的path”，因为你需要充分地定位这个div，而不是（根据你的引用的代码）有一个自己的类或ID。 如果我们能用结构来做，那不是问题。
所以举个例子，如果div是容器中唯一的id（比如说“导航”），那可能是：
#navigation div { text-align: right; } #navigation div span.label { float: left; }
或者，如果容器中有其他div，但这是唯一一个导航容器的直接子元素，则可以使用子select器而不是后代select器：
#navigation > div { text-align: right; } #navigation > div span.label { float: left; }
这工作无需重新安排的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; }
也许这个对某个人来说
只有水平，可能是使用：rtl / ltr的表应该在所有支持表格单元格的浏览器中工作
正常：
<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>
可以使用弹性边距定位来实现。 请注意，这只适用于IE10 +
div { display: flex; } span.label { margin: auto; margin-left: 0; } span.button { margin-right: 5px; }
我也坚持这个…所以这里是我的溶剂
我有这个之前 ，要这个后
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); }
你需要浮动左边的跨度，然后浮动父容器。
这将取决于您尝试实现的布局types。
它是有意的行为，为了屏幕阅读器等我想象的好处。 另一种select是调整加价，但是，正如你所说的，这可能不是理想的。
