Избегайте новой линии между соседними HTML-списками?
-
09-10-2019 - |
Вопрос
Укороченная версия:
Когда два списка примыкаются друг к другу, есть ли способ с CSS (или другими другими средствами), чтобы предотвратить добавку новой линии между двумя списками?
Длинная версия (с кодом):
У меня есть гастронометр HTML, который не разумно обрабатывает вложенные списки, которые смешают <ol>
а также <ul>
элементы. (Если вы уже догадались, что это Oracle UCM Dynamic Converter, вы выигрываете приз.)
В частности, когда исходные документы Documents Destys заказанные и неупорядоченные списки, генерированный 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.
Спасибо!
Решение
Если единственная видимая проблема - это пустая строка между списками, как насчет просто:
ol, ul {
margin-top: 0;
margin-bottom: 0;
}