3

我试图在一行中有 3 个跨度。左侧跨度为固定宽度。右跨度是向右浮动，也是固定宽度。中间跨度是消耗两个跨度之间的空间。这 3 个跨度是从数据库中提取的，因此每个字段中都会有多行不同的值，除了第三个跨度，它将作为删除按钮提供服务。我已经尽了一切努力让它们排成一行，并且到目前为止通过使左侧显示成功：inline-block 和 float:left，右侧：float:right display:inline-block，但中间没有想要扩展以填充两个跨度之间的中间空间，即使在将其更改为 display:block 之后也是如此。

一些帮助将不胜感激！

/*Left Span*/
.word_native{
float: left;
clear: left;
margin-top: 7px;
height:22px;
line-height:22px;
margin-left: 10px;
margin-right: 10px;
}

/*Middle Span*/
.word_foreign{
margin-top: 6px;
height:22px;
height:22px;
line-height:22px;
line-height:22px;
display:inline-block;
}
*/

/*Right Span*/

float: right;
clear: right;
margin-top: 6px;
4

1 回答 1

1

似乎您正在做的事情对于表格来说是完美的，那么为什么不使用 html 表格呢？

<table>
    <tr>
        <td class="word_native">native</td>
        <td class="word_foreign">foreign</td>
        <td class="del">del btn</td>
    </tr>
    <tr>
        <td class="word_native">native</td>
        <td class="word_foreign">foreign</td>
        <td class="del">del btn</td>
    </tr>
    ...
</table>

然后可以通过 CSS 将第三列设置为固定宽度。

于 2012-12-05T12:56:18.027 回答