Избегать новой строки между смежными списками HTML? - PullRequest
Новая
       12

Избегать новой строки между смежными списками HTML?

1 голос
/ 19 октября 2010

Короткая версия:

Когда два списка соседствуют друг с другом, есть ли способ с помощью CSS (или каким-либо другим способом) предотвратить добавление новой строки между двумя списками?

Длинная версия (с кодом):

У меня есть машинно-сгенерированный HTML-код, который интеллектуально не обрабатывает вложенные списки, которые смешивают элементы <ol> и <ul>. (Если вы догадались, что это Oracle UCM Dynamic Converter, вы выиграете приз.)

В частности, когда исходный документ объединяет упорядоченные и неупорядоченные списки, сгенерированный HTML закрывает все теги упорядоченного списка обратно на верхний уровень и начинает новый неупорядоченный список, используя несколько тегов неупорядоченного списка, чтобы получить желаемый уровень отступы.

Поскольку это блочные элементы, браузеры отображают это с нежелательной новой строкой между списками. Если бы у меня был прямой контроль над HTML, это было бы легко, но увы. Я полагаю, что CSS выполним, но мое относительное наполовину знание CSS подводит меня. (Наивное использование style="display: inline;" с элементами <ul> у меня не сработало.)

Абстракт, я получаю: 

<ol><li>item 1</li> 
    <li>item 2</li> 
    <ol><li>item 1, indent level 2</li> 
        <li>item 2, indent level 2</li> 
</ol></ol>

<ul><ul><ul><li>bullet, indent level3<li> 
            <li>bullet, indent level3<li>
</ul></ul></ul>

Надеюсь, есть способ сделать из этого отрисованную версию следующим образом: 

<ol><li>item 1</li> 
    <li>item 2</li> 
    <ol><li>item 1, indent level 2</li> 
        <li>item 2, indent level 2</li> 

<ul><li>bullet, indent level3<li> 
    <li>bullet, indent level3<li>
</ul></ol></ol>

Я надеюсь, что это легкий кусочек CSS.

Спасибо!

1 Ответ

2 голосов
/ 19 октября 2010

Если единственной видимой проблемой является пустая строка между списками, как насчет простого: 

ol, ul {
    margin-top: 0;
    margin-bottom: 0;
}
...