如何向具有水平内容的li添加垂直对齐的条形图？

Question

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

我希望在li的HTML列表中有一个垂直列，其中日期始终是旋转的，而我的内容是在右侧。我有一个部分工作副本，但它的黑客。

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

Answer 2

你可以使用transform：rotate（-90deg）;查看这篇css-tricks文章

这会将文本逆时针旋转90度。 http://css-tricks.com/snippets/css/text-rotation/

你可以在这里看到工作演示 http://snook.ca/archives/html_and_css/css-text-rotation http://css-tricks.com/date-display-with-sprites/

Answer 3

以下是一个例子：

http://jsfiddle.net/B7KfU/1/

<ul>
    <li class="songs">
        <div class="dates">May 24</div>
        <div class="details">Bob hope</div>
    </li>
    <li class="songs">
        <div class="dates">May 24</div>
        <div class="details">Bob hope</div>
    </li>
</ul>


ul li{
    list-style-type:none;
    height: 70px;
}

div{
    display:inline-block;
}

.dates{
  transform:rotate(-90deg) translate( -50%,0);
  transform-origin:0.35em center;
  background-color:#333;
  color:white;
  padding-right:16px;
  padding-left:7px;
  font-size:11px;
}