css - UL 并排 CSS

Question

我希望我的 ul 彼此并排 我试图放置一个 display:inline-block 但没有成功。有人可以帮我解决这个问题吗？

@foreach($_employee as $key => $employee)
            <table>
                  <tr>
                    <th width="14%">EMP NO<br>{{ $employee->payroll_employee_number }}</th>
                    <th width="44%">EMPLOYEE NAME<br>{{ $employee->payroll_employee_last_name }}, {{ $employee->payroll_employee_first_name }} {{ $employee->payroll_employee_middle_name }}</th>
                    <th width="30%">PAY PERIOD<br>{{ $show_period_start }} - {{ $show_period_end }}</th>
                    <th width="12%">PAYROLL DATE<br>@if($show_release_date != 'not specified') {{ $show_release_date }}
                        @endif</th>
                  </tr>
            </table>

 //here's the ul
     <ul>
      <li>BASIC PAY : &nbsp; {{ payroll_currency($employee->net_basic_pay) }}</li>
      @foreach($employee->cutoff_breakdown->_gross_pay_breakdown as $breakdown)
          <li>{{ strtoupper($breakdown["label"]) }} : &nbsp; {{ payroll_currency($breakdown["amount"]) }}</li>
      @endforeach
    </ul>

    <ul>
      <li>GROSS SALARY : &nbsp; {{ payroll_currency($employee->gross_pay) }}</li>
    </ul>
@endforeach

CSS

table {
        font-family: arial, sans-serif;
        border-collapse: collapse;
        width: 100%;
       /* margin-bottom: 200px;*/
        page-break-inside: avoid; 
        margin-top: 0;
        margin-left: 0;
        margin-right: 0;
    }

    td {
        border: 1px solid #dddddd;
        text-align: left;
        padding: 0px;
        font-size: 12px;
        page-break-inside: avoid;
    }
    th {
        border: 1px solid #dddddd;
        text-align: left;
        padding: 11px;
        font-size: 12px;
        page-break-inside: avoid;
    }

   ul{
    margin: 0;
    display: inline-block;
   }
   li{
     list-style-type: none;
     font-size: 12px;
     margin: 0;
   }

Answer 1

您目前在同一个父级下拥有 UL 和表格。通过将 UL 包装在一个 div 中来将它们分开，它们应该可以按预期工作。

@foreach(...)
   <table>
      ...
   </table>
   <div class="list-wraper"> <!-- Separator -->
       <ul>
          ...
       </ul>
       <ul>
          ...
       </ul>
   </div>
@foreach

您可以通过 display:inline-block 使用相同的 UL css；

ul{
  margin: 0;
  display: inline-block;
  vertical-align:top; /** We need that too */
}