Как сделать кодовый блок с определенной шириной?

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> в HTML по умолчанию является встроенным элементом, и вы не можете определить width или height для встроенного элемента.

Решение здесь так же просто, как добавив

display: block

в ваш элемент CSS для следующего результата

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

Для получения дополнительной информации о встроенном и ширине, вы можете прочитать this Вопрос

Кроме того, как указал Джеймс Койл , если вы хотите сохранить форматирование кода вместо его встроенного, вам нужно обернуть теги <code> в <pre> теги.

Answer 2

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