Question

我正在构建一个页面，其中包含一堆＆＃34;排行榜＆＃34;样式列表。在开发过程中，一切进展顺利，直到我进入最新版本。

出于某种原因，即使每个部分几乎相同（除了列表上的实际数字），这个特定部分也会破坏布局。

这是一个JSFiddle，它是如何看到它破坏的地方：

这是一个JSFiddle，它在添加破坏它的代码后现在看起来如何：

奇怪的是 - 在添加下面的代码之前从未发生过：

    <table class="toplist-data">
    <tbody class="toplist-body">
            <th class="toplist-left"> No. </th>
            <th class="toplist-middle"> Chat Name </th>
            <th class="toplist-right"> Profile Visits </th>
        <tr class="toplist-row">
                    <td class="toplist-data-left"> 1. </td>
                    <td class="toplist-data-middle"> SomeRandomChatter </td>
                    <td class="toplist-data-right"> 300 </td>
        </tr>                                            
        <tr class="toplist-row">
                    <td class="toplist-data-left"> 2. </td>
                    <td class="toplist-data-middle"> SomeRandomChatter </td>
                    <td class="toplist-data-right"> 250 </td>
        </tr>                                            
        <tr class="toplist-row">
                    <td class="toplist-data-left"> 3. </td>
                    <td class="toplist-data-middle"> SomeRandomChatter </td>
                    <td class="toplist-data-right"> 200 </td>
        </tr>                                            
        <tr class="toplist-row">
                    <td class="toplist-data-left"> 4. </td>
                    <td class="toplist-data-middle"> SomeRandomChatter </td>
                    <td class="toplist-data-right"> 170 </td>
        </tr>                                            
        <tr class="toplist-row">
                    <td class="toplist-data-left"> 5. </td>
                    <td class="toplist-data-middle"> SomeRandomChatter </td>
                    <td class="toplist-data-right"> 150 </td>
        </tr>                                            
        <tr class="toplist-row">
                    <td class="toplist-data-left"> 6. </td>
                    <td class="toplist-data-middle"> SomeRandomChatter </td>
                    <td class="toplist-data-right"> 120 </td>
        </tr>                                            
        <tr class="toplist-row">
                    <td class="toplist-data-left"> 7. </td>
                    <td class="toplist-data-middle"> SomeRandomChatter </td>
                    <td class="toplist-data-right"> 110 </td>
        </tr>                                            
        <tr class="toplist-row">
                    <td class="toplist-data-left"> 8. </td>
                    <td class="toplist-data-middle"> SomeRandomChatter </td>
                    <td class="toplist-data-right"> 90 </td>
        </tr>                                            
        <tr class="toplist-row">
                    <td class="toplist-data-left"> 9. </td>
                    <td class="toplist-data-middle"> SomeRandomChatter </td>
                    <td class="toplist-data-right"> 50 </td>
        </tr>                                            
        <tr class="toplist-row">
                    <td class="toplist-data-left"> 10. </td>
                    <td class="toplist-data-middle"> SomeRandomChatter </td>
                    <td class="toplist-data-right"> 25 </td>
        </tr> 
   </tbody> 
</table>

我觉得奇怪的是，这段代码使用与每个其他（工作）部分的相应代码完全相同的CSS样式。 CSS如下：

    /* Individual TopList Tables */

table.toplist-data {
    font-size: 14px;
    width: 100%;
}


table.toplist-data th {
    font-weight: bold;
    padding-bottom: 5px;
    margin-bottom: 5px;
}

.toplist-left, .toplist-data-left {
    width: 5%;
    text-align: left;
}

.toplist-middle, .toplist-data-middle {
    width: 70%;
    text-align: left;
    padding-left: 20px;
}

.toplist-right, .toplist-data-right {
    width: 20%;
    text-align: right;
}

因此，如果我可以在没有打破布局的情况下使用它两次，为什么它会在第三部分打破它？我无法看到它与表格中的实际数据有任何关系，因为它几乎完全相同。

也许答案很明显，我忽略了它，我不知道。

Answer 1

我认为从display: table

中移除.TLtabs时已修复此问题

Answer 2

我实际上是在发布后不久通过移除＆＃34;空白：nowrap＆＃34;我在父元素上的风格。

至于编辑我的问题的人 - 或许你想解释一下我说什么问题并表现出一点礼貌和礼貌？在你去纠正其他人的语法之前，或许你应该检查自己的语法！阅读您编辑问题标题的内容，并在发现错误时回复我！

为什么这个HTML表格对于它的容器来说太宽了？

2 个答案: