Поплавок: правое отклоняет порядок пролетов

Ответ 1

Общее решение этой проблемы - либо изменить порядок правильных элементов в HTML, либо обернуть их в содержащийся элемент, и поместить его вправо.

Ответ 2

Если вы хотите, чтобы элементы списка были выровнены правильно, не меняя порядок элементов dont float. Сделайте их встроенным. text-align: справа ваш span

div {
    text-align:right;
}

span {
    display:inline;
}

Ответ 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

Ответ 4

div.outerclass {
  text-align: right;
}

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

Ответ 5

очень просто!

div.outerclass {
    float: right;
}

div.innerclass {
    float: left;
}

Ответ 6

Обновление: два облегченных решения CSS:

Использование flex, flex-flow и заказ:

Пример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%;
}

Ответ 7

Поплавьте div справа вместо элементов span?

Ответ 8

Просто используйте display: inline-block и text-align: right вместо float: right:

div { text-align:right }

span { display:inline-block }

Ответ 9

Отвечая на ваш обновленный вопрос:

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

Я говорю "путь к div" выше, потому что вам нужно адекватно настроить таргетинг на этот div, который не имеет (по вашему котируемому коду) своего класса или идентификатора. Это не проблема, если мы можем сделать это со структурой.

Так, например, если div является единственным div внутри контейнера с id (скажем) "навигация", это может быть:

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

Или, если в контейнере есть другие div, но это единственное, что a direct child контейнера навигации, вы можете использовать дочерний селектор вместо селектора-потомка:

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

Ответ 10

Это работает без перестановки 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;
}

Ответ 11

может быть, это для кого-то...

http://jsfiddle.net/15abbg81/

только горизонтальный, может быть использовано: rtl/ltr таблиц должен работать во всех браузерах, поддерживающих cc cc таблицы

нормально

<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>

Ответ 12

Это может быть достигнуто с помощью позиционирования маржи. Обратите внимание, что это будет работать только на IE10 +

div
{
    display: flex;  
}

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

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

Ответ 13

Я тоже застрял с этим... так вот мое усмотрение

У меня было это До и хочу, чтобы этот 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);
}

Ответ 14

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

Ответ 15

Или вы можете использовать гибкий дисплей

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>

Ответ 16

вам нужно будет поместить оставшиеся пробелы и правильно поместить родительский контейнер.

это будет зависеть от типа макета, который вы пытаетесь достичь, однако.

оно предназначалось для поведения, в интересах читателей экрана и тому подобного, которые я себе представляю. другой вариант - настроить надбавку, но это, как вы говорите, может быть нежелательным.