UL> LI CSS / HTML Вопрос - PullRequest
Новая
       11

UL> LI CSS / HTML Вопрос

0 голосов
/ 28 марта 2011

У меня есть несколько меню (ul), и у каждого есть li внутри них. Например, основное навигационное меню для сайта является горизонтальным. Но у меня также есть несколько других меню для продуктов на странице, и эти меню вертикальные.

Я не хочу добавлять class = "verticalMenuOption" ко всем меню, для которых я хочу быть вертикальным, потому что это просто делает вещи в коде уродливыми, а уродство очень отвлекает меня.

Есть ли способ иметь 1 меню с горизонтальными лиями и любое другое меню на сайте с горизонтальными лиями?

По горизонтали: 

            <ul class="menu">
                <li class="selected"><a href="@Href("~/")">Home</a></li>
                <li><a href="@Href("~/")">Products</a></li>
                <li><a href="@Href("~/")">About Us</a></li>
                <li><a href="@Href("~/")">Help &amp; Support</a></li>
                <li><a href="@Href("~/")">Contact Us</a></li>
                <li class="selected"><a href="@Href("#")">My Account</a></li>
            </ul>

Vertical: 

            <ul class="menu">
                <li class="selected"><a href="@Href("~/")">sample</a></li>
                <li><a href="@Href("~/")">sample</a></li>
                <li><a href="@Href("~/")">sample</a></li>
                <li><a href="@Href("~/")">sample</a></li>
                <li><a href="@Href("~/")">sample</a></li>
                <li class="selected"><a href="@Href("#")">sample</a></li>
            </ul>

Ответы [ 4 ]

1 голос
/ 28 марта 2011

Я думаю, вы хотели сказать 1 по горизонтали, остальные по вертикали. Но в любом случае, если вертикаль является правилом, и есть только одно исключение, стиль ul должен быть вертикальным (по умолчанию), а затем сделать единственное исключение для навигации. Если ваша навигация имеет идентификатор, вы можете использовать его как селектор CSS, например, #nav, поэтому вам не нужно добавлять новый класс CSS.

0 голосов
/ 28 марта 2011

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

, тогда вы можете настроить таргетинг на каждый список отдельно 

#header .menu {.. your styles ..}
.content .menu  {.. your styles ..}

Здесь на самом деле недостаточно кодадля правильного объяснения, но обычно есть способ изолировать элемент без добавления дополнительных классов, если нет, то, как уже упоминалось, вы можете это сделать или добавить в обертку div с идентификаторами

0 голосов
/ 28 марта 2011

Добавить идентификатор в меню, которое вы хотите быть горизонтальным

<ul id="horizontal" class="menu"> ... </ul>

<ul class="menu"> ... </ul>

тогда в вашем CSS файле 

#horizontal { display:inline }
0 голосов
/ 28 марта 2011

делает меню по умолчанию вертикальным (путем доступа к классу .menu) и добавляет класс horizontal к классу, который вы хотите использовать как горизонтальный + стиль как горизонтальный.

...