仅当内容延伸时才展开CSS Div

Question

我正在开发一个新博客网站，它会记录我的代码等。我有一个语法荧光笔，看起来像下图...

---

---

我有这个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宽。< / p>

这就是我添加.syntaxhighlighter:hover类的地方，它可以工作，当我将鼠标悬停在sytax荧光笔div上时，它会扩展到我设置的宽度。如果有可能的话，我唯一想改变的就是......

我想以某种方式只扩展荧光笔div宽度，如果它内部的代码超出正常宽度。

任何人都可以帮我吗？

Answer 1

您可以尝试的一件事是设置min-width: 100%;然后设置display:inline-block;这意味着宽度由内容决定（预先格式化的内容意味着它不会包装），但是由于最小宽度，它不会不适当地收缩。您可能会发现也需要设置max-width。

除此之外：小心过度使用!important指令 - 通常没有必要，如果你特定于你的选择器，有时它会弄乱可访问性（例如，如果有人需要一个重写样式表来查看网页）。