css - 连续3个跨度，每个排以不同的宽度购买

我想一排有三个跨度。
左跨距为固定宽度。
右跨是向右浮动，也是固定宽度。
中间跨距是消耗两个跨距之间的空间。
这3个跨距是从数据库中提取的，因此每个字段中将有多行不同的值，第三个跨距除外，它将作为删除按钮提供服务。
我已经尽一切努力让他们排好队，到目前为止，我已经成功地制作了左显示：inline block和float:left，the right: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;

最佳答案

看起来您所做的工作非常适合一个表，那么为什么不使用一个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将第三列设置为固定宽度。