如何在li内联显示ul？

我想知道是否有可能在第一个li元素中内联显示第二个li元素。如何在li内联显示ul？

的结构是这样的：

<div class="one"> 
    <ul> 
     <li>some styling 
      <ul> 
       <li>this element should be displayed inline</li> 
      </ul> 
     </li> 
    </ul> 
</div>

为第一ul CSS规则正在以显示它内嵌在div通过使用display: inline-block。我认为它也可以用于第二个LI元素.one ul li ul { display: inline-block;}

来源

2015-06-20 John

添加一些代码片断 – nikhil

[你的代码工作（ http://jsfiddle.net/0awgty9v/）。注意'.one ul'匹配'.one'后代的所有'ul'。所以'.one ul'就足够了。如果你想指定所有的路径使用子选择器：'.one> ul> li> ul'。 – Oriol

你好，这里是我的意思。 http://jsfiddle.net/0awgty9v/1/ – John

不知道你问的垂直或水平滚动所以这里有两个例子。

这里是上下滚动：

.one {height: 300px; width: 300px; background-color: #EEEEEE;} 
 
.one ul {display: inline-block; list-style: none;padding:0;} 
 
.one ul li {width: 150px; height: 100px; background-color: red;overflow:scroll;} 
 
.one ul li ul li {width: 150px; height:30px; background-color: yellow;}

<div class="one"> 
 
    <ul> 
 
     <li>I scroll up and down 
 
      <ul> 
 
       <li>1 ...</li> 
 
       <li>2 ...</li> 
 
       <li>3 ..</li> 
 
       <li>4 ..</li> 
 
       <li>5 ..</li> 
 
      </ul> 
 
     </li> 
 
     <li>some other random list item</li> 
 
    </ul> 
 
</div>

下面是一个左到右滚动：

.one {height: 300px; width: 300px; background-color: #EEEEEE;} 
 
.one ul {display: inline-block; list-style: none; padding:0;} 
 
.one ul li {width: 150px; background-color: red; overflow:scroll;} 
 
.one ul li ul li {width: 150px; height:30px; background-color: yellow;} 
 
.one ul ul {display: flex;float: left;}

<div class="one"> 
 
    <ul> 
 
     <li>I scroll this way -> 
 
      <ul> 
 
       <li>1 ...</li> 
 
       <li>2 ...</li> 
 
       <li>3 ..</li> 
 
       <li>4 ..</li> 
 
       <li>5 ..</li> 
 
      </ul> 
 
     </li> 
 
     <li>some other random list item</li> 
 
    </ul> 
 
</div>

来源

2015-06-21 04:20:45 IMI

这样的事情？

.one { 
 
    display: block; 
 
} 
 

 
.one > ul { 
 
    display: block; 
 
} 
 

 
.one > ul > li { 
 
    display: block; 
 
    background: #ccc; 
 
    margin-bottom: 5px; 
 
} 
 

 
.one > ul > li > ul, .one > ul > li > ul > li { 
 
    display: inline-block; 
 
}

<div class="one"> 
 
    <ul> 
 
    <li> 
 
     <ul> 
 
     <li>Inline</li> 
 
     </ul> 
 
     <ul> 
 
     <li>Inline</li> 
 
     </ul> 
 
    </li> 
 
    <li>Block</li> 
 
    </ul> 
 
</div>

来源

2015-06-20 11:49:26

如何在li内联显示ul？

回答

相关问题