有没有办法改变 <code> HTML 标签的宽度？答案

【问题标题】：Is there a way to change the width of the <code> HTML tag?有没有办法改变 <code> HTML 标签的宽度？
【发布时间】：2012-03-29 01:19:13
【问题描述】：

我注意到对<code> 的样式在宽度方面的任何修改都没有任何效果。它似乎总是设置为“自动”。

我只是想在具有 100% 宽度的 <code> 标记（由于某些已知的 iBooks 错误，此标记是强制性的）中编写一些代码。一种解决方法是将<code> 放在具有100% 背景样式的<div> 中。这工作正常，但我将不得不处理几百个<code> 标签...这就是我希望能够修改<code> 宽度的原因。

有什么想法吗？谢谢。

【问题讨论】：

w3.org/TR/html401/struct/text.html#h-9.2.1 注意，CODE 被认为是“内联”元素，其宽度/高度不会影响，因为它的宽度由内容决定。根据下面的 Rob W，您必须将其转换为作为块渲染，这样 inline-block 可以工作。

标签： html css tags width

【解决方案1】：

<code> 元素是内联元素。在这些上设置高度或宽度不会对其大小产生任何影响。

使用display:inline-block::

code {
    display: inline-block; 
    width: 100px; /* Whatever. The <code>'s width will change */
}

【讨论】：

@Starx 感谢您的回复。效果很好:)。

【解决方案2】：

根据您的要求将display: block 或inline-block 添加到code 元素。休息应该按计划进行

查看example

【讨论】：

此方法不允许其他内容在同一行：jsfiddle.net/YnQ5m/1
@RobW，一般在显示代码时，不必将它们显示在一条直线上。对我来说几乎不是这种情况。
这个问题，你的回答充满了<code>的例子。 Markdown 将反引号变成<code> 环境。
@RobW，这不是重点。无论哪种方式，我还在我的回答中写了包括inline-block 到但as per the requirement
如果意图使元素 100% 宽，正如问题所暗示的那样，那么display: block 更可取：更好的浏览器支持（并且更合乎逻辑 - 如果它是 100% 宽，则不是真正内联）。

【解决方案3】：

我认为解决这个问题的好方法是使用 CSS 布局 - 溢出 这里我使用了 Tailwind CSS。您可以使用原始 CSS 来完成此任务。

     <pre className="overflow-auto bg-gray-900 text-white p-5">
        <code className="text-base font-light ">{yourCode}</code>
      </pre>

【讨论】：