仅限CSS - 如何在一行中使用所有li滚动ul

I have a div with a fixed width. Inside is an ul. The ul has a random amount of li children, with varying widths.

我有一个固定宽度的div。里面是一个ul。 ul具有随机数量的li子,具有不同的宽度。

I use bootstrap.

我用bootstrap。

Here is an example:

这是一个例子:

<div class="parent">
    <div class="child">    
        <ul id="inner" class="nav nav-tabs">
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
        </ul>         
    </div>  
</div>

<div class="parent">    
   <div class="child">        
        <ul id="inner-new" class="nav nav-tabs">
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
        </ul>        
    </div> 
</div>

<style>
.parent {
    background: green;
    width: 200px;
    padding: 20px;
    overflow: hidden;
    display: inline-block;
}

.child {
    background: white;
    padding: 10px;
    overflow: auto;
}

li {
    padding: 30px;
}

#inner {
    background: yellow;
    padding: 10px;
    width: 500px;
}

#inner-new {
    background: yellow;
    padding: 10px;
    width: auto;
}
</style>

Here is a fiddle with above code:

这是上面代码的小提琴:

http://jsfiddle.net/4dvkbtpg/2/

Is there a way to have the li's all in one row (like it is in the first example) but without giving the ul a fixed width? Since I don't know how many li's there will be or what width any of them will be, I can't add use fixed widths. I can also only use CSS for this.

有没有办法将li全部放在一行(就像在第一个例子中那样)但没有给ul一个固定的宽度?因为我不知道它们有多少个或者它们的宽度是多少,所以我不能添加使用固定宽度。我也只能使用CSS。

I tried various things with float:left and different display styles, but I couldn't figure it out. Does anyone know of a way to accomplish this?

我用浮动尝试了各种各样的东西:左边和不同的显示样式,但我无法弄明白。有谁知道这样做的方法?

Here is a little picture, to make it clearer (hopefully!) http://i.imgur.com/Qz9eUD2.png

这是一张小图片,让它更清晰(希望!)http://i.imgur.com/Qz9eUD2.png

6 个解决方案

#1

please check this demo

请查看此演示

.parent1{
width:100%;
}

then You please check this demo

那你请看看这个演示

if i understand you i think you want something like this another demo

如果我理解你,我想你想要这样的另一个演示

according to your image final demo

根据你的形象最终演示

#2

Check this update link:

检查此更新链接:

http://jsfiddle.net/4dvkbtpg/3/

Css code:

.parent {
    background: green;
    width: 200px;
    height:400px;
    padding: 20px;
    overflow: scroll;
    display: inline-block;
}

#3

Just remove the width (width: 200px;) from the class ".parent".

只需从类“.parent”中删除宽度(宽度:200px;)。

#4

you just need Following changes with #inner class

你只需要使用#inner类进行以下更改

-Add this properties

- 添加此属性

max-height: 150px; //set the maximum width of particulate div above that height scroll bar will shown overflow-y: auto; // allowing the scroll after what maximum height has been set to the particular div or element.

最大高度:150px; //设置粒子div的最大宽度高于该高度滚动条将显示overflow-y:auto; //在为特定div或元素设置了最大高度后允许滚动。

Remove this properties

删除此属性

width : 500px; // this will set the div's width to 500 px and the parent class is having the "display : inline-block" property so this property will extended automatically to the child class so here may you can change one of them as per your choice..

宽度:500px; //这会将div的宽度设置为500 px,父类具有“display:inline-block”属性,因此该属性将自动扩展到子类,因此您可以根据自己的选择更改其中一个属性。。

.parent {
    background: green;
    width: 200px;
    padding: 20px;
    overflow: hidden;
    display: inline-block;
}

.child {
    background: white;
    padding: 10px;
    overflow-y: auto;
}

li {
    padding: 30px;
}

#inner {
  background: yellow;
  padding: 10px;
  /* width: 500px; */
  /* max-width: 200px; */
  overflow-y: auto;
  max-height: 150px;
}

#inner-new {
    background: yellow;
    padding: 10px;
    width: auto;
}

you can check whether you are searching about this or else. you can set max-height with whatever you want

你可以检查一下你是否正在搜索这个或者其他。您可以根据需要设置最大高度

#5

I think i know what you want, i used to stuck in same problem. Don't use ul and li. check this demo or below code

我想我知道你想要什么,我常常陷入同样的问题。不要使用ul和li。查看此演示或以下代码

.wrapper{
    width:200px;
    white-space: nowrap;
    overflow:auto;
}

.wrapper span{
  display: inline-block;
  line-height: 50px;
  margin: 0px 5px;
  padding: 0px 5px;
  border: 1px solid;
}

<div>
   <p class="wrapper">
       <span>Child 1</span>
       <span>Child 2</span>
       <span>Child 3</span>
       <span>Child 4</span>
       <span>Child 5</span>
       <span>Child 6</span>
   </p>
</div>

#6

I changed a little bit of your code, the main problem was (I think) that the bootstrap is giving the li a float:left; and a display:block, so I changed that to display: inline-block; and removed the float, and added the list-style: none to li, white-space: nowrap; and overflow-y: hidden; maybe this is what you want.

我改变了你的一些代码,主要问题是(我认为)引导程序给了li一个浮点数:left;和一个显示:块,所以我改变它显示:inline-block;并删除了浮点数,并将list-style:none添加到li,white-space:nowrap;和溢出-y:隐藏;也许这就是你想要的。

.parent {
    background: green;
    width: 200px;
    padding: 20px;
    overflow: hidden;
    display: inline-block;
}

.child {
    background: white;
    padding: 10px;
    overflow: auto;
}

li {
    padding: 30px;
    list-style: none;
    display: inline-block !important;
    float: none !important;
}

#inner {
    padding: 10px;
    white-space: nowrap;
    overflow-y: hidden;
    background: yellow;
}

#inner-new {
    background: yellow;
    padding: 10px;
    width: auto;
}

#1