我正在开发一个新的博客网站,它将记录我的代码等。我有一个语法荧光笔,看起来像下图...
我有这个 CSS
.syntaxhighlighter {
width: 100% !important;
margin: 1em 0 1em 0 !important;
position: relative !important;
overflow: auto !important;
overflow-y: hidden !important;
font-size: .9em !important;
}
.syntaxhighlighter:hover {
width: 135% !important;
}
正如您在图片中看到的,语法高亮代码具有一定的宽度以适合我的布局,我正在尝试在悬停时使其更宽,因为存在使其比我的内容 div 更宽的代码。
那是我添加 .syntaxhighlighter:hover
类的地方,当我将鼠标悬停在 sytax highlighter div 上时,它会扩展到我设置的宽度。现在,如果可能的话,我唯一希望改变的是......
如果其中的代码超出正常宽度,我只想以某种方式扩展荧光笔 div 的宽度。
谁能帮我解决这个问题?
最佳答案
您可以尝试设置 min-width: 100%;
然后设置 display:inline-block;
这意味着宽度由内容(具有预先格式化的内容意味着它也不会换行),但它不会因为最小宽度而不适本地收缩。您可能会发现还需要设置一个 max-width
。
另外:小心不要过度使用 !important
指令 - 如果您对选择器有特定要求,通常它是不必要的,有时它会扰乱可访问性(例如,如果有人需要覆盖用于查看网页的样式表)。
关于css - 仅当内容拉伸(stretch)时才展开 CSS Div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7801208/