html - 使用 twitter bootstrap 固定 <code> 元素的宽度

Question

我在表中有一组行，包含代码块，如下所示:

<td style='border-bottom: 1px solid lightgray;'>
    <div>
        <code>-1245</code>
    </div>                                 
    <br />                                 
    <div>
        <code>-12455</code>
    </div>                                  
    <br />                                 
    <div>
        <code>-1245</code>
    </div>                                
    <br />                                 
    <div>
        <code>-1245</code>
    </div>                                  
    <br />                                 
    <div>
        <code>-1245</code>
    </div>  
</td>

还有一些 CSS，像这样:

<style scoped>
    .k-grid code {
        width: 45px;
        color: lightslategray;
    }
</style>

我的问题是我需要代码框具有相同的宽度，而不是基于内容的宽度(类似流体)。

即当我有数字 1234 时，框以一种宽度显示，而当我有数字 12345 时，框会扩展到另一种宽度。

我似乎无法使用 CSS 在本地覆盖它。有什么建议吗？

更新

根据以下答案找到适合我需求的解决方案。 CSS:

.k-grid code {
    line-height: 1.25;
    display: inline-block;
    width: 50px;
    color: lightslategray;
}

Answer 1

HTML <code> 元素是一个内联 包装器。为了应用宽度，您需要将显示类型更改为block或 inline-block :

td code {
  display: block;
  width: 70px;
  margin: 2px 0;
}

在这种情况下，您不需要包装 <code>元素 <div> :

<table>
  <tr>
    <td>
        <code>-1245</code>
        <code>-12455</code>
        <code>-1245</code>
        <code>-1245</code>
        <code>-1245</code>
    </td>
  </tr>
</table>

这是 JSBin Demo .

更新

首先我要注意我使用了 margin之前的属性仅适用于之前的演示，请将其删除。另外，最好重新设置 line-height <code>的属性(property)元素:

td code {
  display: block; /* Or inline-block */
  width: 50px;
  line-height: 1;
}

TW Bootstrap 应用 margin-bottom其属性(property) .progress元素。如果需要，请在您的样式表中重置边距:

.progress {
  margin: 0; /* <-- Override Bootstrap default style */
}

但是，在这种情况下，我认为最好将每一行放在单独的行中 (<tr>)。
我根据您发布的图片创建了一个演示。

这是 JSBin Demo #2 .