如何在 li 内联中显示 ul？

Question

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

结构如下：

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

CSS 第一个 ul 的规则正在使用 display: inline-block 在 div 中内联显示它。我认为它也适用于使用 .one ul li ul { display: inline-block;}

的第二个 li 元素

Answer 1

是这样的吗？

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

Answer 2

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

这是上下滚动：

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

如何在 li 内联中显示 ul？

How to display an ul in li inline?

html

css

html-lists