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

时间:2013-04-30 22:33:21

标签: html css html-table

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

.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, spantr更大的宽度,但它仍然无效。

2 个答案:

答案 0 :(得分:3)

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

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

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

答案 1 :(得分:2)

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