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

StackOverflow https://stackoverflow.com/questions/3963703

  •  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;
}
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top