关于我的表格内容我有一个奇怪的问题
.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
更大的宽度,但它仍然无效。
答案 0 :(得分:3)
在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}}内的文本不会换行到下一行的另一种方法。
答案 1 :(得分:2)
您的问题是默认情况下,span elemnt有display:inline
。 inline
个元素无法调整大小并始终包含其内容。通过在您的跨度上设置display: inline-block
,您可以使其显示在inline
(可以水平堆叠等)和block
之间,即可以调整大小。非定位block
元素的默认设置是水平填充其容器,这就是它的工作原理。