Справка по неупорядоченному списку - PullRequest
Новая
       5

Справка по неупорядоченному списку

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

Мне нужно зациклить массив ссылок для выпадающего меню.

Раскрывающееся меню с фиксированной высотой div . Мне нужны ссылки, чтобы заполнить div, начиная сверху слева, вниз, затем, когда столбец будет на максимальной высоте (установленной окружающим div), он начнет новый столбец сверху вниз, как показано ниже. 

link one    link four   link seven  
link two    link five   link eight
link three  link six    link nine

Я пытаюсь использовать <ul> <li></li> </ul>, но я не могу понять, как я собираюсь его оформить? если я плаваю влево, он будет выравниваться по левому краю, если я не плаваю влево, чтобы начать новый столбец?

Это ЖИДКИЙ файл, поэтому я ограничен. (жидкость является шаблоном Shopify )

Ответы [ 4 ]

3 голосов
/ 20 марта 2011

Вы можете сделать это с помощью столбцов CSS3: http://www.quirksmode.org/css/multicolumn.html

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

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

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

Я не думаю, что это действительно такой же общий ответ, как и то, что вы ищете, но при условии, что определенные константы (всегда девять элементов; всегда 3 столбца из 3 элементов) вот пример использования относительного позиционирования для достижения желаемогоэффект: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
    <head>
        <title>Unordered list help/title>
        <style type="text/css">
            #myList {
                width:301px;
                height:61px;
            }
            #myList li + li + li + li {
                width:100px;
                float:right;
                clear:right;
                position:relative;
                top:-60px;
                left:-100px;
            }
            #myList li + li + li + li + li + li + li {
                position:relative;
                left:0px;
                top:-120px;
            }
            #myList li:first-child,
            #myList li:first-child + li,
            #myList li:first-child + li + li {
                width:100px;
            }
        </style>
    </head>
    <body>
        <ul id="myList">
            <li>One</li>
            <li>Two</li>
            <li>Three</li>
            <li>Four</li>
            <li>Five</li>
            <li>Six</li>
            <li>Seven</li>
            <li>Eight</li>
            <li>Nine</li>
        </ul>
    </body>
</html>
0 голосов
/ 20 марта 2011

Если вам нужна альтернатива использованию CSS3, попробуйте посмотреть на эту статью A List Apart по многостолбцовым спискам , в которой есть несколько способов разбить список на несколько столбцов. Я не буду публиковать конкретное решение, потому что оно будет зависеть от вашей ситуации, но я попробовал метод 6, и он сработал.

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

Боюсь, что такой поток невозможен в HTML / CSS, как сегодня. Вещи текут слева направо, затем сверху вниз. Не наоборот. Верно. CSS3 столбцы. Не знал о них. : P Спасибо, Крис!

В любом случае, хотя CSS3-столбцы по-прежнему не очень широко поддерживаются, самый простой обходной путь - назначить каждому элементу фиксированную высоту, а затем можно рассчитать каждый столбец в коде на стороне сервера. Просто испустите с них стандартный <table> и покончите с этим.

В противном случае вы можете использовать Javascript для измерения каждого элемента и выполнения макета на стороне клиента.

...