避免頁面菜單上的代碼塊重疊

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的邊界框向右推，使背景顏色和邊框不再重疊。但是，由於這種顯示模式的靈活性，內容的寬度降低到所需的最小值。這可以通過簡單地最大化元件的寬度來補償。