Question

我有一个<div>，其中包含<tables>个<tables>，如何在一行中获得这些<html> <head> <title>no-line-break</title> <style type="text/css"> #foo { width: 500px; border: 1px solid #000; overflow-x: auto; } .bar { float: left; width: 150px; margin: 5px; } .bar th { background-color: #c0c0c0; } </style> </head> <body> <div id="foo"> <table class="bar"> <tr> <th> Foo #1 </th> </tr> <tr> <td> Bar #1 </td> </tr> </table> <table class="bar"> <tr> <th> Foo #2 </th> </tr> <tr> <td> Bar #1 </td> </tr> <tr> <td> Bar #2 </td> </tr> <tr> <td> Bar #3 </td> </tr> </table> <table class="bar"> <tr> <th> Foo #3 </th> </tr> <tr> <td> Bar #1 </td> </tr> </table> <table class="bar"> <tr> <th> Foo #4 </th> </tr> <tr> <td> Bar #1 </td> </tr> </table> <div style="clear: both;"> </div> </div> </body> </html>？

{{1}}

Answer 1

您需要在#foo内添加另一个div，该div至少与所有带有边距和填充的表的总和一样宽，以便它们不会换行。

示例：

<html>
<head>
    <title>no-line-break</title>
    <style type="text/css">
        #foo
        {
            width: 500px;
            border: 1px solid #000;
            overflow-x: auto;
        }
        #foo_inner
        {
            width: 650px;
        }
        .bar
        {
            float: left;
            width: 150px;
            margin: 5px;                
        }
        .bar th
        {
            background-color: #c0c0c0;
        }
    </style>
</head>
<body>
    <div id="foo">
    <div id="foo_inner">
        <table class="bar">
            <tr>
                <th>
                    Foo #1
                </th>
            </tr>
            <tr>
                <td>
                    Bar #1
                </td>
            </tr>
        </table>
        <table class="bar">
            <tr>
                <th>
                    Foo #2
                </th>
            </tr>
            <tr>
                <td>
                    Bar #1
                </td>
            </tr>
            <tr>
                <td>
                    Bar #2
                </td>
            </tr>
            <tr>
                <td>
                    Bar #3
                </td>
            </tr>               
        </table>
                    <table class="bar">
            <tr>
                <th>
                    Foo #3
                </th>
            </tr>
            <tr>
                <td>
                    Bar #1
                </td>
            </tr>
        </table>
        <table class="bar">
            <tr>
                <th>
                    Foo #4
                </th>
            </tr>
            <tr>
                <td>
                    Bar #1
                </td>
            </tr>
        </table>
        <div style="clear: both;">&nbsp;</div>
       </div>
    </div>
</body>
</html>

Answer 2

也许传统的桌面布局可能就是你想要的。

http://jsfiddle.net/T8pfZ/2

Answer 3

让所有人display:inline。所以，这样做：

.bar
    {
        float: left;
        width: 150px;
        margin: 5px;                
        display: inline;
    }

#foo
    {
         width: 500px;
         border: 1px solid #000;
         overflow-x: auto;
         display: inline;
    }

Answer 4

尝试添加“display：inline;”到你的Foo CSS块。您可能需要调整宽度。

Answer 5

如果我理解你，你就不能将所有表放在同一行中，所以你需要将显示：内联放在#foo样式中。

#foo {
display:inline
}

如何在一行上放置多个表格？

5 个答案: