如何在CSS列表中强制水平滚动？ [英] how to force horizontal scrolling in an HTML list using CSS?

问题描述

我有这样的列表：

 < div& 
< ul> 
< li>一个< / li> 
< li>两个< / li> 
< li>三< / li> 
< li>四< / li> 
< / ul> 
< / div> 
  

和以下CSS：

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

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

 一 - 二 - 三 - 四
  
 
 
 
 我的问题： 
 
这样做给我两行，每行两个项目。 / p> 
 
 
 问题： 
 
是否有CSS方法强制列表项全部在一行中，使用水平滚动？现在，如果我设置 overflow：auto ，我只会得到垂直滚动条，我不想要。
 
 
 
在wrap上设置。我只是好奇，如果有一个CSS解决方案，我可以在列表中单独使用。
 
 
 
感谢您的帮助！ 
解决方案
您不能真正滚动浮动内容。一旦浮动，默认情况下不会计算在父容器的宽度或高度。真的< ul> 刚刚扩展到它的设置宽度，然后不做任何其他操作。
 
 
 
  float：left 将使它们可滚动。你唯一的问题是，在每个内联块之间有额外的空间。您可以通过删除每个列表项之间的换行符来删除它。这不是最漂亮的事情。通常我会使用 font-size：0 ，然后重置列表项中的字体大小。
 
 
 
 
 
 
 
  jsFiddle示例：您还需要确保项目在打开元素宽度时不换行。 > 
 
 
 
 
 
 删除换行符 
 
 
 使用 font-size：0   
 
 
 
I have a list like this:
<div>
   <ul>
     <li>one</li>
     <li>two</li>
     <li>three</li>
     <li>four</li>
   </ul>
 </div>
and the following CSS:
ul { 
     width: 160px;
     height: 100px;
     overflow: auto; 
     }
li { 
     width: 80px;
     display: inline-block;
     float: left 
     }
I'm trying to force the list items to display from left to right, that is 
 one - two - three - four
My problem:

Doing it like this gives me two rows with two items each.

Question:

Is there a CSS way to force the list items to all be in a single row so I can use horizontal scrolling? Right now if I set overflow:auto I'm only getting vertical scrollbars, which I don't want.

I don't want to set this on the wrapping div. I'm just curious if there is a CSS solution I can use within the list alone.

Thanks for help! 
解决方案
You can't really scroll floated content. Once it's floated, it's not calculated in the width or height of the parent container by default. Really the <ul> is just expanding to its set width and then not doing anything else.

Removing the float: left will make them scrollable. The only problem you'll have then is that there is the extra "space" between each inline-block. You can remove that by removing the line-breaks between each list item. It's not the prettiest thing. Normally I'd use a font-size: 0 and then reset the font-size in the list item.

You also need to make sure the items don't wrap to a new line when they hit the width of the element.

jsFiddle Examples:


Removing line breaks
Using font-size: 0


                        
这篇关于如何在CSS列表中强制水平滚动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！