如何制作具有定义宽度的代码块？

Question

我正在尝试将代码块添加到我正在制作的文档网站，但我无法使代码块具有定义的宽度。它的宽度仅与其中的文本有关。

我希望块具有设定的宽度，并且文本简单地落在其中，而不是让代码块受文本大小的限制。

* {
  width: 1265px;
  font-family: 'Roboto', sans-serif;
}

body {
  display: inline-block;
}

main {
  margin: auto;
}

.centerContent {
  width: 75%;
  margin: auto;
  float: right;
}

.sidebar {
  width: 25%;
  margin-top: 10px;
  float: left;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

code {
  width: 600px;
  font-family: 'Source Code Pro', monospace;
  color: #43892a;
  background-color: #000;
}

<header>
  <h1>Batch Documentation</h1>
</header>
<main class="clearfix">
  <div class="sidebar">
    <ul>
      <li>Test</li>
      <li>Test2</li>
      <li>Test3</li>
    </ul>
  </div>
  <div class="centerContent">
    <h2>Sample text</h2>
    <code>Hello</code>
  </div>
</main>

很有趣：我希望代码块看起来像本网站中的代码块。不是在谈论颜色而是在谈论它们的大小。

Answer 1

code {
  width: 600px;
  font-family: 'Source Code Pro', monospace;
  color: #43892a;
  background-color: #000;
  display: block;
}

Answer 2

HTML 中的 <code> 元素默认是内联元素，您不能为内联元素定义 width，也不能定义 height。

这里的解决方法很简单，添加

display: block

在您的元素 CSS 中获得以下结果

code {
  width: 600px;
  font-family: 'Source Code Pro', monospace;
  color: #43892a;
  background-color: #000;
  display: block;
}

关于内联和宽度的更多信息，您可以阅读this question

此外，正如 James Coyle 指出的那样，如果您想保持代码格式而不是内联，则需要将 <code> 标签包装在 <pre> 标签中。

如何制作具有定义宽度的代码块？

How to make a codeblock with a defined width?

html

css

inline

styling

width