Question

我想知道是否可以在第一个li元素中显示内联的第二个li元素。

结构如下：

<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中将其显示为内嵌。我认为将它用于.one ul li ul { display: inline-block;}

的第二个li元素也是有效的

Answer 1

不确定您是要求垂直滚动还是水平滚动，所以这里都是示例。

这是一个上下滚动：

.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>

Answer 2

这样的东西？

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

如何在li内联中显示ul？

2 个答案: