Как изменить порядок плавающих элементов?

Question

Я почти не использую float:right в моем css, и теперь я сделал и столкнулся с раздражающей проблемой. Я плаваю пункты меню вправо

мой HTMl

    <ul id="extMenu">
        <li>
            <a href="#">Home</a>
        </li>
        <li>
            <a href="#">Feedback</a>
        </li>
        <li>
            <a href="#">Contact</a>
        </li>
    </ul>

мой CSS

    #extMenuBlock {
    }
        #extMenuBlock ul#extMenu { 
            list-style:none;
            padding:0;
            margin:0; 
        }
        #extMenuBlock ul#extMenu li { 
            float:right;
            padding:5px; 
        }

Теперь, когда элементы плавают, я получаю меню в следующем порядке Contact Feedback Home, но я хочу, чтобы они были в обратном порядке, т.е.

Answer 1

Использование display: inline on

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

#extMenu { float: right; }
#extMenu li { float: left; }

Таким образом, само меню будет перемещаться вправо, в то время как пункты меню будут перемещаться влево.

Другим решением было бы просто изменить порядок ваших

Answer 2

Попробуйте это

ul#extMenu {
    list-style: none;
    padding: 0;
    margin: 0;
    float: right;
}
ul#extMenu li {
    display: inline;
    padding: 5px;
}

Answer 3

Мой вариант ответа - вообще не плавает.

ul#extMenu {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: right;
}
ul#extMenu li {
    display: inline;
    padding: 5px;
}

Answer 4

Что вы действительно хотите сделать, так это сделать каждый элемент li встроенным элементом и сместить ul целиком вправо (или используйте text-align: right, если хотите).Новый CSS:

#extMenuBlock {
    float:right;
}
#extMenuBlock ul#extMenu { 
    list-style:none;
    padding:0;
    margin:0; 
}
#extMenuBlock ul#extMenu li { 
    display:inline;
    padding:5px; 
}

Answer 5

Почему вы решили плавать вправо? Плавание нескольких предметов вправо означает, что первый предмет будет самым правильным, а последний всплывающий предмет будет слева от ваших предметов.

Выровняйте ваше меню по правому краю и поместите ваши пункты в одну строку, я бы использовал это:

#extMenuBlock {
    text-align: right;
}
#extMenuBlock ul#extMenu {
    list-style:none; padding:0; margin:0;
}
#extMenuBlock ul#extMenu li {
    display: inline-block; padding:5px;
}

Answer 6

«Частичный» ответ для изменения порядка отображения во время выполнения:

http://plugins.jquery.com/project/reverseorder

Это плагин jQuery. Вы можете изменить порядок элементов в вашем примере с помощью

$('#extMenu li').reverseOrder();

Не очень элегантный способ, но он работает (если, конечно, JavaScript включен ...)