代码之家 › 专栏 › 技术社区 › Jason S

在表中的<code>元素下面添加垂直空间

css html

Jason S · 技术社区 · 7 年前

我有一些固定宽度的内容要放在表格标题单元格中周围有一个小气泡,以区别于非固定宽度的文本。

下面的示例看起来很好,除了气泡底部覆盖了单元格边框。

我想通过将文本向上移动1来修复,似乎无法将其解决;实际上,我 think->em>i want the baseline of the code.literal->code>text to be 1-2px higher than the normal ><th>. baseline.

有办法吗?

code>code.literal{ 背景:F5F5; 边框:1个实心CCC; 边界半径:3px; 填料:1px 3px; 字体粗细:正常; 字体系列:consolas,menlo,“解放mono”,courier,monospace; } Td,Td { 字体系列:Arial,无衬线; } 小{ 字体大小:75%; } 表{ 边框折叠:折叠; } 表td,表th{ 边框:1倍纯黑; 填充底部:0; 填料顶部:0; }<代码> < /PRE> table> <tr><th>铝合金<code class=“literal small”>foo.bar.baz.quux</code></th> <th>钡<code class=“literal small”>Jabberwocky</code></th> & LT/TR & GT; <tr><td>1</td><td>2</td></tr> </table>>= < / div下面的示例看起来很好,除了气泡底部覆盖了单元格边界。我想通过将文本上移1来修复,但似乎无法解决;实际上,我认为我想要的基线 code.literal 文本比正常文本高1-2倍 <th> 基线。有办法吗? code.literal { background: #f5f5f5; border: 1px solid #ccc; border-radius: 3px; padding: 1px 3px; font-weight: normal; font-family: Consolas,Menlo,"Liberation Mono",Courier,monospace; } th, td { font-family: Arial, sans-serif; } .small { font-size: 75%; } table { border-collapse: collapse; } table td, table th { border: 1px solid black; padding-bottom: 0; padding-top: 0; } <table> <tr><th>Aluminum <code class="literal small">foo.bar.baz.quux</code></th> <th>Barium <code class="literal small">jabberwocky</code></th> </tr> <tr><td>1</td><td>2</td></tr> </table>

1 回复 | 直到 7 年前

brianespinosa 7 年前

如果添加 display: inline-block; 对你 code.literal ,则该表将元素作为块级项包含。我想这就是你想要的。

code.literal {
    background: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 1px 3px;
    font-weight: normal;
    font-family: Consolas,Menlo,"Liberation Mono",Courier,monospace;
    display: inline-block;
}

th, td {
    font-family: Arial, sans-serif;
}
.small {
    font-size: 75%;
}

table {
  border-collapse: collapse;
}
table td, table th {
  border: 1px solid black;
  padding-bottom: 0;
  padding-top: 0;
}

<table>
<tr><th>Aluminum <code class="literal small">foo.bar.baz.quux</code></th>
    <th>Barium <code class="literal small">jabberwocky</code></th>
</tr>
<tr><td>1</td><td>2</td></tr>
</table>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前