html - 我如何将垂直对齐的条添加到具有水平内容的 li 中？

Question

问题很难表达，所以最好有一个图像示例。

我想在 li 的 HTML 列表中有一个垂直列，其中日期总是旋转，我的内容在右边。我有一个部分工作副本，但它是 hack-y。

Answer 1

查看这个 JSFiddle http://jsfiddle.net/2GSBu/2/

<div class="wrapper">
<div class="date">May 24, 2014</div>
<ul>
    <li>Bob Hope</li>
    <li>Dr Who</li>
    <li>Disney Land</li>
    </ul>
</div>

ul {

    margin: 0;
    padding: 0;
}

li {

    margin-left: 60px;
    list-style: none;

}

.date {
    transform:rotate(-90deg);
    -ms-transform:rotate(-90deg); /* IE 9 */
    -webkit-transform:rotate(-90deg); /* Opera, Chrome, and Safari */
    position: absolute;
    left: 0;
    bottom: 0;


}

.wrapper {
    position: absolute;
    left: 0;
}