Дисплей встроенная проблема

Question

Рассмотрим следующую структуру HTML:

<div id="footer">
                <div id="content">
                    <ul>
                        <li>
                            <ul>
                                <li>AAA</li>
                                <li>AAA</li>
                                <li>AAA</li>

                            </ul>
                        </li>
                        <li>
                            <ul>
                                <li>BBB</li>
                                <li>BBB</li>
                                <li>BBB</li>
                            </ul>
                        </li>
                    </ul>
                </div>
    </div>

Далее я применяю следующий CSS:

#content ul {
    list-style: none;
}

#content ul li{
    display: inline;
}

Вывод: AAA AAA AAA BBB BBB BBB Требуемый вывод:

AAA BBB 

AAA BBB 

AAA BBB

Любая помощь будет принята с благодарностью.

Answer 1

Вы можете добиться этого, удалив #content ul li{display: inline;} и добавив правило ниже.Живой пример: http://jsfiddle.net/tw16/5E7Ac/

#content ul li ul{
    float: left;
}

Answer 2

Упорядочение содержимого, отличное от того, как оно выглядит в источнике, вызывает огромную боль в шее.Возможно, вам лучше использовать таблицу или список определений, в которых чередуются элементы AAA и BBB.Если это не вариант, вы можете использовать два блока фиксированной ширины ul с плавающей слева, с элементами блока li - в зависимости от ваших требований к дизайну (например, насколько различаются ширины? Должны ли элементы располагаться вертикально)?)

Answer 3

Вы можете просто разместить оба списка рядом друг с другом.

#content ul { list-style:none; }
#content > ul > li { float:left; margin-right:1em; }

http://jsfiddle.net/geertdd/Cu49F/1/

Answer 4

#content ul{float:left; list-style:none;}
#content>ul li{float:left;} /*Only target fist-level li*/
#content li>ul>li{clear:both;}

Это отобразит именно то, что вы пытаетесь достичь без использования таблицы.

Answer 5

Вместо этого вы можете попробовать

#content > ul > li {
    display: inline;
}

Таким образом, только первые <li> элементы получат правило.

Редактировать

Вы можете использовать float:left для достижения своего результата, как показано в этой скрипке .

Answer 6

Похоже, что AAA и BBB представляют табличные данные. Почему бы не использовать стол?

<table>
    <tr>
        <td>
            AAA
        </td>
        <td>
            BBB
        </td>
    </tr>
    <tr>
        <td>
            AAA
        </td>
        <td>
            BBB
        </td>
    </tr>
</table>

Таблицы все еще занимают свое место в веб-разработке. Они не являются злыми по своей природе .

Answer 7

Вы пытались изменить #content ul li на #content ul ul li, это должно решить проблему.