0

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

.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更大的宽度，但它仍然不能很好地工作。

4

2 回答 2

3

设置display: inline-block;你span应该解决这个问题。

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

您padding在一侧或两侧观察到的“缺失”span并不是真正的“缺失” padding。在padding开头、结尾、顶部和底部添加span。因此，在padding“丢失”的地方，它根本不存在，因为您正在查看 a line-break，而不是在 的末尾或开头span。您可以解决此问题的另一种方法是white-space: nowrap;在span. 这是另一种确保 a 中的文本span不会换行到下一行的方法。

于 2013-04-30T22:41:07.123 回答
2

您的问题是 span 元素display:inline默认具有。inline元素无法调整大小并始终包装其内容。通过设置display: inline-block跨度，您可以使其行为介于inline（可以水平堆叠等）和之间block，即可以调整大小。非定位block元素的默认设置是水平填充其容器，这就是它起作用的原因。

于 2013-04-30T22:46:21.867 回答