html - span 中词尾的 css 不正确

Question

我有一个有一行两列的表，在第二个“td”中我有很多分隔的词所以我把它们一个一个地放在一个“span”中
可能有很长的顺序跨度元素，我想设置一个 scroll-x
跨度是内联的，但词尾是粘连形式，例如:“دوترچه”是正确的，但“دوترچهـ”不是
当我将显示更改为表格单元格时似乎是正确的，但我错过了一些其他样式表，例如边距
我的错误是什么，我该如何解决？

https://jsfiddle.net/L44vmbh8

*{
padding: 0px;
margin: 0px;
border: 0px;
direction:rtl;
}

.item td div{
overflow-x: scroll;
width: 75vw;
height:55px;
}

.item td div span{
background-color: #00ff26;
margin: 5px;
padding: 5px;
display: inline;

}

.item>div{
max-width: 82vw;
border-radius: 15px;
background-color: rgba(0,0,0,.2);
padding: 5px;

}

<div class="item">
        <div>
        <table>
            <tr>
                <td>نام:</td>
                <td><div><span>دفتر</span><span>دفترچه</span><span>دیوان</span><span>دفتر</span><span>دفترچه</span><span>دیوان</span><span>دفتر</span><span>دفترچه</span><span>دیوان</span><span>دفتر</span><span>دفترچه</span><span>دیوان</span><span>دفتر</span><span>دفترچه</span><span>دیوان</span><span>دفتر</span><span>دفترچه</span><span>دیوان</span><span>دفتر</span><span>دفترچه</span><span>دیوان</span><span>دفتر</span><span>دفترچه</span><span>دیوان</span><span>دفتر</span><span>دفترچه</span><span>دیوان</span></div></td>
            </tr>
        </table>
        </div>
</div>

Answer 1

这是我修改你的 html 和 css 后的屏幕截图 http://imgur.com/DwC6CDs

更新:

我在第一列中添加了垂直对齐“顶部”。作为引用，您可以访问http://www.w3schools.com/