Показать структуру таблиц

Question

Я пытаюсь отобразить таблицу из тегов <ul>. И нужно, чтобы его содержимое отображалось один за другим. Это мой код

CSS

.activity-list-header > li { 
    display: inline-block; 
    text-align: left; 
    width: 15.666%; 
    list-style: outside none none; 
} 

.activity-list-body > li { 
    display: inline-block; 
    text-align: left; 
    width: 15.666%; 
    list-style: outside none none; 
} 

HTML

<div> 
    <ul class="activity-list-header"> 
     <li>Activity</li> 
     <li>Session</li> 
     <li>Rate Type</li> 
     <li>Rate</li> 
     <li>Qty</li> 
     <li>Select</li> 
    </ul> 
    <ul class="activity-list-body activity-list-body-1"> 
     <li>Activity name</li> 
     <li>Session name</li> 
     <li>Rate Type name</li> 
     <li>Rate name</li>    
     <one-rate activity="activity" selected-date="selectedDate" >    
      <li>Qty name</li> 
      <li>Select name</li> 
     </one-rate> 
    </ul> 
    <ul class="activity-list-body activity-list-body-1"> 
     <li>Activity name</li> 
     <li>Session name</li> 
     <li>Rate Type name</li> 
     <li>Rate name</li>    
     <one-rate activity="activity" selected-date="selectedDate" >    
      <li>Qty name</li> 
      <li>Select name</li> 
     </one-rate> 
    </ul> 
</div> 

Моя проблема заключается в том, что мне нужно, чтобы отобразить все содержимое строки, но этого не происходит, как последний два <li> обернуты внутри <one-rate>, используемые в AngularJS. Я знаю, что неверно обертывать <li>, кроме использования <ul>. Мне нужно знать, чтобы решить эту проблему, не меняя данную структуру html.

Here is my fiddle

Answer 1

Во-первых, ваш HTML-код не действует: только li элементы могут быть дети ul. Пользовательский элемент не может быть.

Тем не менее, ни Fx, ни Chrome, кажется, обеспокоены тем, что и есть еще решение вашей проблемы моделирования: изменив селектор .activity-list-body > li на .activity-list-body li (не просит Ли быть прямым потомком этого класса, только потомок), ваш макет станет правильным.
Edit2: если у вас есть подсписки, тогда это не будет работать из коробки; вам нужно переопределить 1 до 4 заявления от этого правила ...
Edit: не тестировал в Саф или IE8-11 +

Обновлено скрипку: https://jsfiddle.net/e6kogq6z/1/

Answer 2

Я создал длинное решение, но то все, что вам нужно сделать, это удалить> в css на .activity-list-body> li, чтобы он работал.