Укороченная версия:
Когда два списка находятся рядом друг с другом, есть ли способ с помощью 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.
Спасибо!