Как перемещать ul в обоих направлениях?

#html #css #css-float #html-lists

#HTML #css #css-float #html-списки

Вопрос:

Возможно ли создать «строку меню» из одного ul , а затем переместить некоторые li s влево, а некоторые вправо? Итак, мой код прямо сейчас

 <body>
    <header><nav><ul>
        <li><a href="pg1.html">Menu1</a></li>
        <li><a href="pg2.html">Menu2</a></li>
        <li><a href="pg3.html">Menu3</a></li>
        <li><a href="pg4.html">Menu4</a></li>
    </ul></nav></header>
    ...
</body>

И css:

 header > nav {
    background-color: red;
    height: 2em;
}
header > nav > ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
header > nav > ul > li {
    float: left;
    padding: 0 1em;
}
header > nav > ul > li > a {
    display: block;
    font-family: 'Tahoma';
    color: white;
    line-height: 2em;
}
a:hover {
    color: yellow;
}
a {
    text-decoration: none;
}

Все пункты меню, конечно, находятся слева, но можно ли переместить некоторые вправо, не изменяя HTML «значительно»?

1. Зачем вам нужен a ul ? Иметь just <nav> <a hreh="...> </nav> — это прекрасно. И a s, по умолчанию, являются встроенными элементами. Не могли бы вы добавить макет или что-то, что иллюстрирует то, чего вы пытаетесь достичь?

2. Вы можете применить класс к тем <li> s, которые хотите, чтобы они были перемещены правильно.

Ответ №1:

Вы можете добавить класс к элементам списка, которые вы хотите справа, а затем добавить правило CSS для float:right;

Пример:

Добавьте в свой CSS:

     .right {
        float:right;
    }

Замените ваш HTML5 на это

  <header><nav><ul>
    <li><a href="pg1.html">Menu1</a></li>
    <li><a href="pg2.html">Menu2</a></li>
    <li class="right"><a href="pg3.html">Menu3</a></li>
    <li class="right"><a href="pg4.html">Menu4</a></li>
</ul></nav></header>

Другим вариантом было бы создать 2 div (один, который перемещается влево, другой — вправо), а затем поместить по одному списку в каждый div.

1. В зависимости от того, куда вы добавляете правило CSS, вам может потребоваться добавить к нему !important, чтобы оно переопределяло ваше другое объявление. Таким образом, средняя строка CSS должна быть: float:right !важно;

Ответ №2:

В вашей таблице стилей создайте другой класс ~~или идентификатор~~ для элементов списка, которые перемещаются вправо. Вот jsfiddle, который я сделал, чтобы продемонстрировать:

http://jsfiddle.net/Z55hz/

таблица стилей

 header > nav {
    background-color: red;
    height: 2em;
}
header > nav > ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
header > nav > ul > li {
    float: left;
    padding: 0 1em;
}

li.other {
    float:right;

}

header > nav > ul > li > a {
    display: block;
    font-family: 'Tahoma';
    color: white;
    line-height: 2em;
}
a:hover {
    color: yellow;
}
a {
    text-decoration: none;
}

HTML

 <body>
     <header><nav><ul>
        <li><a href="pg1.html">Menu1</a></li>
        <li class="other"><a href="pg2.html">Menu2</a></li>
        <li><a href="pg3.html">Menu3</a></li>
        <li class="other"><a href="pg4.html">Menu4</a></li>
    </ul></nav></header>
    ...
</body>