试图溢出HTML标记而不是包装是破坏了<pre><code>的间隔。
我正在将CSS应用于pre code选择器，以便生成样式化的代码块，就像您在GitHub或其他地方看到的那样。我使用flexbox来进行布局，并且在一个"box“div的内部有两个”面板“div，其中一个有一个代码块(它只是<pre><code>标记中的代码)，而"box”div位于一个主“容器”div的内部。
我的基本CSS是..。
.*, *:before, *:after {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
pre code {
display: inline-block;
overflow: auto;
white-space: pre;
padding: 1rem;
margin: 1rem;
}
.container {
display: flex;
flex-direction: column;
margin: 1rem;
gap: 1rem;
}
.box {
display: flex;
flex-direction: row;
gap: 1rem;
}
.panel {
display: flex;
flex-direction: column;
flex: 0.5;
padding: 1rem;
}由于flex: 0.5，这两个面板的宽度应该相等，但是正确的面板扩展以适应块，而不是缩小的块以适应面板。
如果我在white-space: pre-wrap上设置了pre code，我就会得到所需的布局行为，但是当然，代码是文字包装的，我不想这样做。
当然，如果我使用white-space: pre并向pre code添加一个专用宽度，我就会得到所需的行为，其中代码块有一个水平滚动条。我不能使用一个专门的宽度，因为我需要块来适应任何面板，它在里面。
由于某些原因，在pre code上设置pre code根本不起任何作用。
为了确保我没有通过在其他地方做一些事情而导致这个错误，我把这个片段放在一起来确认我的问题。
回答 1
Stack Overflow用户
发布于 2022-12-04 22:13:28
看起来，您所遇到的问题是由于pre和代码元素是内联块元素造成的，这意味着它们不会占用父容器的全部宽度。相反，它们只会像它们的内容那样广泛。
解决此问题的一个解决方案是将pre和code元素的display属性更改为块，这将导致它们占用父容器的全部宽度。
下面是包含此更改的CSS更新版本：
* {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
pre, code {
display: block;
overflow: auto;
white-space: pre;
padding: 1rem;
margin: 1rem;
}
.container {
display: flex;
flex-direction: column;
margin: 1rem;
gap: 1rem;
}
.box {
display: flex;
flex-direction: row;
gap: 1rem;
}
.panel {
display: flex;
flex-direction: column;
flex: 0.5;
padding: 1rem;
}这将导致代码块占用.panel元素的全部宽度，当代码块溢出时，滚动条将出现。
我希望这能帮到你!如果你还有其他问题，请告诉我。
https://stackoverflow.com/questions/74681388
复制相似问题
腾讯云开发者
