html - CSS-如何文本缩进嵌套的无序列表

Question

我不知道这是否可行，但我正在尝试缩进红色的

以使用 CSS 将其包裹在其下方。我使用了文本缩进、填充、边距，但无法正常工作。红色的

似乎设置在与绿色文本相同的 x/y 坐标处。它只能让我把它推离时间(绿色)。

我可以使用表格，但我正在尝试使用 CSS 来实现。

上图就是我所在的位置。下图是我所追求的。

HTML

<div class="agendaList">
    <ul>
        <li>Day, Month Date</li>
            <ul>
                <li>0:00 am</li>
                <li>This is where the event description will appear. I would like for it to wrap under itself and not under the time. How do I start the wrap at the first word in the first sentence (This) of this &lt;li&gt;.</li>
            </ul>
    </ul>
    <ul>
        <li>Day, Month Date</li>
            <ul>
                <li>0:00 am</li>
                <li>This is where the event description will appear. I would like for it to wrap under itself and not under the time. How do I start the wrap at the first word in the first sentence (This) of this &lt;li&gt;.</li>
            </ul>
    </ul>
</div>

CSS

.agendaList ul ul {
    list-style: disc;
    /* list-style-image: url(bullet.gif); */
    margin-left: 0;
    padding-left: 0;
}

.agendaList ul ul li {
    display: inline;
    list-style: none;
    color: green;
}

.agendaList ul ul li:last-child {
    display: inline;
    color: red;
    list-style-position: inside;
    padding: 10px 0 10px 20px;
    text-indent: -1em;
}

Answer 1

这里有两个选项:

绝对定位第一个 li 元素，然后使用边距为第二个列表项添加空间。

Example Here

.agendaList ul ul li:first-child {
    position: absolute;
}
.agendaList ul ul li:last-child {
    display: inline-block;
    color: red;
    list-style-position: inside;
    margin-left: 65px;
}

或者，更好的选择是将两个 li 元素的显示设置为 table-cell。将 white-space:nowrap 添加到第一个 li 以防止文本换行。

Example Here

.agendaList ul ul li {
    display:table-cell;
    list-style:none;
    color:green;
}
.agendaList ul ul li:first-child {
    white-space:nowrap;
}
.agendaList ul ul li:last-child {
    color: red;
    list-style-position: inside;
    padding-left:20px;
}