Question

我注意到<code>的样式相对于宽度的任何修改都没有任何影响。它似乎总是设置为“自动”。

我只是想在<code>标签内写一些代码（这个标签是强制性的，因为一些已知的iBooks错误），宽度为100％。一种解决方法是将<code>置于具有100％背景样式的<div>内。这项工作正常，但我必须处理几百个<code>标签......这就是我希望能够修改<code>宽度的原因。

有什么想法？感谢。

Answer 1

<code>元素是内联元素。在这些上设置高度或宽度对它们的大小没有任何影响。

使用display:inline-block ::

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

Answer 2

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

查看example

Answer 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>

有没有办法改变<code> HTML tag?</code>的宽度

3 个答案: