Избегайте перекрытия блока кода в меню страницы

Question

Я использую Pelican для создания веб-страниц. Однако я не могу избежать совмещения черных кодов со списком меню таким образом.

Это соответствующий код

генеральный

• Начните с чтенияThe Zen of Python <https://www.python.org/dev/peps/pep-0020/>_

.. sourcecode:: python

import this

• Для python у нас есть pocket-lint, который проверяет PEP8 и некоторые другие вещи.

Answer 1

Попробуйте следующее:

#general .highlight {
    display: flex;
}

#general .highlight pre {
    width: 100%;
}

Режим отображения flex позволяет переставить содержимое по размеру и положению. Установив это, ограничивающий прямоугольник окружающего элемента будет сдвинут вправо, так что цвет фона и границы больше не будут перекрываться. Однако из-за гибкого характера этого режима отображения ширина содержимого уменьшается до необходимого минимума. Это может быть компенсировано простым максимизацией ширины элемента.