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

Question

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

Это заинтересованный кусок кода

Общие

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

.. Исходник- :: питон

import this 

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

Answer 1

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

#general .highlight { 
    display: flex; 
} 

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

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