css встроенная ротация

Question

У меня есть стол. В моем td у меня 2 ли. В первом ли у меня есть 2 <p>. Первый <p> представляет день и второй месяц. Я хотел бы повернуть на 90 градусов второй <p>, и я хотел бы, чтобы он отображался рядом с днем. Мой код не работает, если я положил display:inline на <p>. Если я удалю display:inline, то вращение работает отлично, но 2 <p> s не отображаются рядом друг с другом, а один друг под другом. И это не то, что я хотел бы. Надеюсь, кто-то может помочь. Заранее благодарю за ваши ответы. Приветствия. Марк.

Вот мой HTML:

<td> 
    <ul> 
    <li> 
     <p>12</p> 
     <p>FEB</p> 
    </li> 
    <li> 
    </li> 
    </ul> 
</td> 

Мой CSS:

#div td li p{ 
    display:inline; 
    font-size:10px;} 

#div td li p:last-child{ 
    -moz-transform: rotate(270deg); 
    -moz-transform-origin: 50% 50%; 
    -webkit-transform: rotate(270deg); 
    -webkit-transform-origin: 50% 50%;} 

Answer 1

<table> 
    <tr> 
     <td> 
      <ul> 
       <li> 
        <p>12</p> 
        <p>FEB</p> 
       </li> 
       <li> 
       </li> 
      </ul> 
     </td> 
    </tr> 
</table> 


td li p{ 
    display:inline-block; 
    /* for lte IE7 */ 
    #zoom: 1 
    #display: inline; 
    font-size:10px; 
} 

td li p:last-child{ 
    -moz-transform: rotate(270deg); 
    -moz-transform-origin: 50% 50%; 
    -webkit-transform: rotate(270deg); 
    -webkit-transform-origin: 50% 50%;} 

Answer 2

Вы должны сначала разобраться в вашей использование HTML. Это неправильный способ использования неупорядоченных списков <ul> или абзацев <p>. Вы не видите ни абзаца, ни списка, просто дату. Были также синтаксические ошибки в вашем css [отсутствующая точка с запятой, #div означает id = "div" в HTML, что неверно]

Вот ваша проблема. Я разделил <ul> и <p> и использовал только <span>. Затем я добавил класс к этому слою «side». Затем этот класс имеет заданные значения вращения.

http://cssdesk.com/U8ZRy