Question

关于我的表格内容我有一个奇怪的问题

.table {
   position:absolute;
   top:12px;
   left:3px;
   width:87px;
   height:74px;
}

.table tr {
  vertical-align:middle;
}

.table td {
  text-align:center;
  padding:1px;color:#000000;
  font-size:1em;
  line-height:1.5em; 
  width: 50px;
}

.table td span {
  padding:3px 5px;
  font-size:1em;   
  background-color:yellow;
}

HTML

<table class="table" cellpadding="0" cellspacing="0">
 <tbody>
   <tr>
     <td><span>example 1</span>
     </td>
   </tr>
 </tbody>
</table>

我希望span内的文字有白色背景，但我不希望白色背景只延伸到文本的边缘，所以我应用了padding。

但是，有些文本是在后台，但其中一些不是。

for example
some texts are like these...
 -------
|example|
 -------

or 

 --------
| example|
 --------


This is what I want.
 ---------
| example |
 ---------

我已经给td, span和tr更大的宽度，但它仍然无效。

Answer 1

在display: inline-block;上设置span应解决此问题。

正如下面的评论所指出的那样，span默认情况下是内联元素，但这并不意味着您无法设置其padding，设置padding的工作原理内联元素就好了。您的问题在于，您已将table设置为87px宽，td设置为50px宽。现在span中的文字不适合td，因为它是一个内联元素，它会流向下一行。设置display: inline-block;会强制文本不会流到下一行。解决此问题的另一种方法是将table和td设置得更宽，以便它可以在一行中放入更多文字。

您在padding的一侧或两侧“失踪”span所观察到的内容并非真正“失踪”padding。 padding会在span的开头，末尾，顶部和底部添加padding。因此，在line-break“缺失”的地方，它根本就不存在，因为您正在查看span，而不是white-space: nowrap;的结尾或开头。解决此问题的另一种方法是在span上设置span。这是确保{{1}}内的文本不会换行到下一行的另一种方法。

Answer 2

您的问题是默认情况下，span elemnt有display:inline。 inline个元素无法调整大小并始终包含其内容。通过在您的跨度上设置display: inline-block，您可以使其显示在inline（可以水平堆叠等）和block之间，即可以调整大小。非定位block元素的默认设置是水平填充其容器，这就是它的工作原理。

如何在html表和css中解决这个奇怪的问题

2 个答案: