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

Question

我不知道这是否可行，但我试图缩进＆lt; li＆gt;红色用CSS包裹在自己下面。我使用了文本缩进，填充，边距，但无法使其工作。 ＆lt; li＆gt;红色似乎设置在与绿色文本相同的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;
}