html - 为了将图标 syde 并排放置，我需要进行哪些更改

Question

我花了好几个小时来看看我做错了什么，但无论我尝试什么都没有发生。所以问题来了。我的索引页面中有两个操作，我放置了图标（字体真棒库）来表示编辑和删除。而且我想并排放置图标，现在在另一行中有单独的

到目前为止，我尝试的是使数据表更小，但这对我没有帮助。

<div class="panel panel-flat">
    <div class="panel-body">
        <table class="table datatable-responsive datatable-patients">
            <thead>
                <tr class="bg-blue">
                    <th>
                        Firstname
                    </th>
                    <th>
                        Lastname
                    </th>
                    <th>
                        Contact
                    </th>
                    <th>
                        Email
                    </th>
                    <th>
                        Blood Group
                    </th>
                    <th></th>     
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model)
                {
                    <tr id="[e-mail]_id">
                        <td>
                            @Html.DisplayFor(modelItem => item.patient_first_name)
                        </td>

                        <td>
                            @Html.DisplayFor(modelItem => item.patient_last_name)
                        </td>

                        <td>
                            @Html.DisplayFor(modelItem => item.patient_contact_number)
                        </td>

                        <td>
                            @Html.DisplayFor(modelItem => item.patient_email)
                        </td>

                        <td>
                            @Html.DisplayFor(modelItem => item.patient_blood_group)
                        </td>

                        <td>
                            <ul class="icons-list text-left">
                                <li class="text-primary-600"><a href="~/Patients/Edit?Id=@item.patient_id"><i class="icon-pencil7"></i></a></li>
                                <li class="text-danger-600"><a class="delete_pacient" href="javascript:;" data-id="@item.patient_id"><i class="icon-trash"></i></a></li>
                            </ul>
                        </td>

                    </tr>
                 }
            </tbody>
        </table>
    </div>
</div>




 $('.datatable-patients').DataTable({
        dom: 'Bfrtip',

        columnDefs: [
            {
                responsivePriority: 1,
                targets: -1
            },
            {
                targets: [-1],
                orderable: false,
                searchable: false,
                printable: false,
                width: "120"
            }
        ]
    });

我尝试单独添加，但效果不佳。谁能告诉我这里有什么问题？我在哪里犯错了？

标签： htmljquerycss

Answer 1

试试这个 CSS：

.icons-list{
  display: flex;
  list-style: none; /* To remove the list bullets */
}
.icons-list li{
  margin-left: 1em; /* adjust it */
}