Question

下面span s中的文字溢出（见小提琴）。我无法弄清楚原因。

的jsfiddle

HTML

<table>
    <thead>
        <tr>
            <th></th>
            <th>Date</th>
            <th>Participant</th>
            <th>Car ID</th>
            <th>Score</th>
            <th>Round Totals</th>
            <th>Pro</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>X</td>
            <td>7/15</td>
            <td>Alfonso Ribeiro</td>
            <td>1001</td>
            <td>
                <div class="faux-row">
                    <span>Start</span>
                    <span>2003</span>
                </div>
                <div class="faux-row">
                    <span>End</span>
                    <span>2140</span>
                </div>
            </td>
            <td>

            </td>
            <td>yes</td>
        </tr>
        <tr>
            <td>X</td>
            <td>7/15</td>
            <td>Joan Rodriguez</td>
            <td>1002</td>
            <td>
                <div class="faux-row">
                    <span>Start</span>
                    <span>100</span>
                </div>
                <div class="faux-row">
                    <span>End</span>
                    <span>0</span>
                </div>
            </td>
            <td>

            </td>
            <td>yes</td>
        </tr>
        <tr>
            <td>X</td>
            <td>7/15</td>
            <td>Jeremy Johns</td>
            <td>1003</td>
            <td>
                <div class="faux-row">
                    <span>Start</span>
                  <span>1000200</span>
                </div>
                <div class="faux-row">
                    <span>End</span>
                  <span>1002232</span>
                </div>
            </td>
            <td>

            </td>
            <td>yes</td>
        </tr>
    </tbody>
</table>

CSS

body {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 0.9em;
}
td:nth-child(1) {
    color: red;
    font-size: 0.8em;
}
td:nth-child(4) {
    max-width: 60px;
    word-wrap: break-word;
}
td:nth-child(5) .faux-row {
    background-color: #def;
    margin: 5px;
    padding: 2px;
}
td:nth-child(5) span:nth-child(1) {
    display: inline-block;
    text-align: left;
    width: 46%;
    vertical-align: middle;
}
td:nth-child(5) span:nth-child(2) {
    display: inline-block;
    text-align: right;
    width: 46%;
    vertical-align: middle;
}
table {
    border-collapse: collapse;
}
td, th {
    border: 1px solid maroon;
    padding: 2px;
    text-align: center;
}
th {
    background-color: lightyellow;
}

上述代码试图实现的目标：

保持＆＃34;开始/结束＆＃34; span向左推，其关联的点数在右边。
防止点数包裹到下一行
不用像素大的宽度进行硬编码

Answer 1

1）删除宽度

2）添加text-align: left;到跨度的父级

3）将第二个跨度向右浮动

<强> FIDDLE

td:nth-child(5) .faux-row {
    background-color: #def;
    margin: 5px;
    padding: 2px;
    text-align: left; /* <-- */
}
td:nth-child(5) span:nth-child(2) {
    display: inline-block;
    float: right; /* <-- */
    vertical-align: middle;
    margin: 1px 0 0 10px; /* <-- */
}

防止内联块元素溢出其父元素

1 个答案: