I am struggling to showcase a table created using <ul> tags. I want the content to be displayed one after the other. Here is my code:
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>
The issue I am facing is that I want all the content to be in a single row, but this doesn't happen because the last two <li> are wrapped inside <one-rate> being used in AngularJS. I understand that it is not correct to wrap <li> apart from within <ul>. I need a solution to this problem without altering the existing html structure.