我希望我的ul彼此并排,我试图放一个display:inline-block但没有运气。有人可以帮我吗?

css - UL彼此相邻CSS-LMLPHP

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

最佳答案

当前,您的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 */
}

10-07 19:06
查看更多