当前位置: 首页 > 面试题库 >

如何使用CSS在HTML列表中强制水平滚动?

严玉泽
2023-03-14
问题内容

我有一个这样的清单:

<div>
   <ul>
     <li>one</li>
     <li>two</li>
     <li>three</li>
     <li>four</li>
   </ul>
 </div>

和以下CSS:

ul { 
     width: 160px;
     height: 100px;
     overflow: auto; 
     }
li { 
     width: 80px;
     display: inline-block;
     float: left 
     }

我试图强制列表项从左到右显示,即

 one - two - three - four

我的问题:
这样做会给我两行,每行两项。

问题:
是否有一种CSS方式可以将列表项强制全部放在一行中,以便可以使用水平滚动?现在,如果我设置了 overflow:auto,
我只会得到垂直滚动条,这是我不想要的。

我不想在包装div上设置此设置。我很好奇,是否有一个CSS解决方案可以单独在列表中使用。

感谢帮助!


问题答案:

您不能真正滚动浮动内容。浮动后,默认情况下不会在父容器的宽度或高度中进行计算。实际上,<ul>只是将其扩展到其设置的宽度,然后什么也不做。

删除float: left将使它们可滚动。唯一的问题就是每个内联块之间都有额外的“空间”。您可以通过删除每个列表项之间的换行符来删除该行。这不是最漂亮的东西。通常我会使用a
font-size: 0,然后在列表项中重置字体大小。

您还需要确保当它们碰到元素的宽度时,它们不会换行。



 类似资料:
  • 我有一个很大的html项目到期工作,我只需要添加最后一个触摸。我正在尝试创建一个水平图标列表在我的页面,但一直遇到问题。这是一张我需要创作的图片。请给我指出正确的方向或发送一些代码来尝试。谢谢

  • 问题内容: 我正在尝试创建一系列只能水平滚动的照片。 它应该看起来像这样的 但是,只有通过指定包含照片的的宽度,才能实现上述目的(因此它们不会“自动换行”)。如果我不放宽- 看起来像这样; 使用CSS可以防止固定宽度的图像发生变化,该怎么办。 谢谢 问题答案: 您可以使用与。这样写:

  • 我想要中心的div水平与一个选项滚动使用CSS。我怎样才能做到呢?我看到了一个解决方案使用边距自动和最大宽度,但div将被削减,所以我没有这样做。 null null

  • 问题内容: 我有一个,当行太多时,会出现滚动条,但是当行太长时,该行会分成两行,而不是出现水平滚动条,如何使水平条出现而不是分成两行,我的添加如下: 问题答案: 正如我们自己的Rob Camick 在这里介绍的那样,您可以尝试使用类似… 这将停止行/自动换行

  • 问题内容: 我只想在Webview中进行垂直滚动,而不希望进行水平滚动。 这帮助我解决了滚动问题。 但是使用它使我的webview看起来很奇怪。所有编辑文本的高度都被压缩(垂直),并且看起来很差。 还有什么其他方法可以从客户端禁用水平滚动? 使用SINGLE_COLUMN如何避免webview高度变化的问题?我希望垂直外观与没有SINGLE_COLUMN时的外观相同 问题答案: 这是一种hack,

  • 问题内容: 有没有一种方法可以将水平滚动条添加到HTML表格中?我实际上需要根据表的增长方式在垂直和水平方向上都可以滚动,但我无法显示任何滚动条。 问题答案: 您是否尝试过CSS 属性? 更新 正如其他用户指出的那样, 这不足以 添加滚动条。 因此,请参阅下面的评论和答案。