Question

我想在表格单元格中添加三个span元素。我能够用他们的背景图像显示三个跨度，并让它们在桌子内均匀分布。

我遇到的问题是我必须使用什么css，所以内容总是包含在跨度中，并且还为跨度添加内部填充/边距，以便文本不会到达边框的边缘？ / p>

Answer 1

试试这个：

 <table>
    <tr>
        <td>
            <div style="padding: 2px">
                <span></span><span></span><span></span>
            </div>
        </td>
    </tr>
</table>

OR（如果我们不能使用div）：

<table>
    <tr>
        <td>
            <table style="padding: 2px">
                <tr>
                    <td>
                        <span></span><span></span><span></span><span></span><span></span><span></span>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Answer 2

您需要为width和word-break设置固定的spans。

一个例子：

span
{
width:100px;
word-break: break-word;
}

然后，对于内部填充，您需要设置填充，并使其阻止。像这样：

span
{
width: 100px;
word-break: break-all;
display: inline-block;
padding: 5px;
}

---------修订-----------

如果您不希望背景随填充范围增长，则需要将背景设置为子跨度。我给你举个例子：

CSS：

span.father
{
display: inline-block;
padding: 5px;
}
span.inner
{
width: 100px;
word-break: break-all;
display: inline-block;
background:red;
}

HTML：

<td>
    <span class="father">
        <span class="inner">TEXT</span>
    </span>
    <span class="father">
        <span class="inner">TEXT</span>
    </span>
    <span class="father">
        <span class="inner">TEXT</span>
    </span>
</td>

Answer 3

JsFiddle

.sp1,.sp2,.sp3
{
    margin:0px;
    padding:10px;
    display:inline-block;
}
<td>
     <span class="sp1">span rwerwerr</span>
     <span class="sp2">spanwerwerwer 2</span>
     <span class="sp3">spwerwerwerweran 3</span>
</td>

如何水平对齐单元格内的三个跨度并在跨度中添加内部填充

3 个答案: