Css 仅水平滚动

我试图创建一个水平滚动条，当溢出时，它将在页面顶部水平滚动。我尝试了不同的溢出值组合，但是我在div中的inline div元素和水平设置只是创建了一个换行符，这意味着水平条是没有意义的。这是我的代码：

CSS:

#文件"滚动{
宽度：100%；
高度：120px；
背景色：#FFFFFF；
溢出-x：滚动；
溢出y：隐藏；
}
.file_图标{
高度：80px；
利润率：7px；
左侧填充：10px；
显示：内联块；
填充物：5px；
浮动：左；
背景色：#中交；
不透明度：0.5；
边界半径：10px；
宽度：90px；
}
1.
2.
3.
4.
5.
6.
7.

如果希望水平滚动，则需要使内容比容器大。使用浮动元素或内联元素是不可能的：当没有足够的空间时，它们会落在“下一行”

2种解决方案：

将内容放入一个超大元素中。 使用非浮动/非内联元素。 这很容易，但是。。。它使用一个单行表。可能有其他选择，但我现在看不到

我根本没碰你的CSS，这很有效：

<div id="main_content">
    <div id="files_scroll">
        <table><tr>
           <td><a class="file_icon">1</a></td>
           <td><a class="file_icon">2</a></td>
           <td><a class="file_icon">3</a></td>
           <td><a class="file_icon">4</a></td>
           <td><a class="file_icon">5</a></td>
           <td><a class="file_icon">6</a></td>
           <td><a class="file_icon">7</a></td>
           <td><a class="file_icon">8</a></td>
           <td><a class="file_icon">9</a></td>
           <td><a class="file_icon">10</a></td>
           <td><a class="file_icon">11</a></td>
           <td><a class="file_icon">12</a></td>
           <td><a class="file_icon">13</a></td>
           <td><a class="file_icon">14</a></td>
           <td><a class="file_icon">15</a></td>
           <td><a class="file_icon">16</a></td>
           <td><a class="file_icon">17</a></td>
           <td><a class="file_icon">18</a></td>
           <td><a class="file_icon">19</a></td>
           <td><a class="file_icon">20</a></td>
           <td><a class="file_icon">21</a></td>
        </tr></table>
    </div>
</div>

1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
17
18
19
20
21

如果希望水平滚动，则需要使内容比容器大。使用浮动元素或内联元素是不可能的：当没有足够的空间时，它们会落在“下一行”

2种解决方案：

将内容放入一个超大元素中。 使用非浮动/非内联元素。 这很容易，但是。。。它使用一个单行表。可能有其他选择，但我现在看不到

我根本没碰你的CSS，这很有效：

<div id="main_content">
    <div id="files_scroll">
        <table><tr>
           <td><a class="file_icon">1</a></td>
           <td><a class="file_icon">2</a></td>
           <td><a class="file_icon">3</a></td>
           <td><a class="file_icon">4</a></td>
           <td><a class="file_icon">5</a></td>
           <td><a class="file_icon">6</a></td>
           <td><a class="file_icon">7</a></td>
           <td><a class="file_icon">8</a></td>
           <td><a class="file_icon">9</a></td>
           <td><a class="file_icon">10</a></td>
           <td><a class="file_icon">11</a></td>
           <td><a class="file_icon">12</a></td>
           <td><a class="file_icon">13</a></td>
           <td><a class="file_icon">14</a></td>
           <td><a class="file_icon">15</a></td>
           <td><a class="file_icon">16</a></td>
           <td><a class="file_icon">17</a></td>
           <td><a class="file_icon">18</a></td>
           <td><a class="file_icon">19</a></td>
           <td><a class="file_icon">20</a></td>
           <td><a class="file_icon">21</a></td>
        </tr></table>
    </div>
</div>

1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
17
18
19
20
21

hey check this link您希望滚动条位于顶部而不是底部的标准滚动条吗？它位于页面上一个单独的div中，而不是默认的滚动条。hey check this link您希望滚动条位于顶部而不是底部的标准滚动条吗？它位于页面上一个单独的div中，不是默认的滚动条。这是一个问题，因为它是一个具有100&高度和宽度规格的应用程序，但当我使用任何一种方法时，它都会扩展页面并创建一个无法接受的滚动条。在哪个浏览器中？你有电话号码吗？我不确定我是否理解这个问题。您更喜欢一个吗？您应该使用

display:inline块而不是使用表格-它更具语义。@Nightfirecat:我知道，但是。让它们工作的方法是使用我的。这需要对超大元素进行仔细的计算/javascript调整，除非有什么我不知道的。啊，好吧-那是有道理的。这是一个问题，因为它是一个高度和宽度规格为100的应用程序，但当我使用任何一种方法时，它都会扩展页面并创建一个无法接受的滚动条。在哪个浏览器中？你有电话号码吗？我不确定我是否理解这个问题。您更喜欢一个吗？您应该使用
display:inline块而不是使用表格-它更具语义。@Nightfirecat:我知道，但是。让它们工作的方法是使用我的。这需要对超大元素进行仔细的计算/javascript调整，除非有什么我不知道的。啊，好吧，那就说得通了。
#file_container {
    width:200%; /*or a javascript calculated value... */
}

<div id="main_content">
    <div id="files_scroll">
        <table><tr>
           <td><a class="file_icon">1</a></td>
           <td><a class="file_icon">2</a></td>
           <td><a class="file_icon">3</a></td>
           <td><a class="file_icon">4</a></td>
           <td><a class="file_icon">5</a></td>
           <td><a class="file_icon">6</a></td>
           <td><a class="file_icon">7</a></td>
           <td><a class="file_icon">8</a></td>
           <td><a class="file_icon">9</a></td>
           <td><a class="file_icon">10</a></td>
           <td><a class="file_icon">11</a></td>
           <td><a class="file_icon">12</a></td>
           <td><a class="file_icon">13</a></td>
           <td><a class="file_icon">14</a></td>
           <td><a class="file_icon">15</a></td>
           <td><a class="file_icon">16</a></td>
           <td><a class="file_icon">17</a></td>
           <td><a class="file_icon">18</a></td>
           <td><a class="file_icon">19</a></td>
           <td><a class="file_icon">20</a></td>
           <td><a class="file_icon">21</a></td>
        </tr></table>
    </div>
</div>