我希望我的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 : {{ payroll_currency($employee->net_basic_pay) }}</li>
@foreach($employee->cutoff_breakdown->_gross_pay_breakdown as $breakdown)
<li>{{ strtoupper($breakdown["label"]) }} : {{ payroll_currency($breakdown["amount"]) }}</li>
@endforeach
</ul>
<ul>
<li>GROSS SALARY : {{ 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 */
}