Блог

Я трачу часы и часы, чтобы понять, что я сделал не так, но что бы я ни пытался, ничего не получалось. Итак, проблема заключается в следующем. У меня есть два действия на моей индексной странице, и я помещаю значок (библиотека font-awesome) для представления редактирования и удаления. И я хочу поместить значок рядом, прямо сейчас они находятся отдельно в другом ряду

До сих пор я пытаюсь уменьшить datatabe, но, однако, это мне не помогает.

 <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="tr-id-@item.patient_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"
            }
        ]
    });
 

Я пытаюсь добавить отдельно, но тоже не работает.
Кто -нибудь может сказать мне, что здесь не так? Где я допустил ошибку ?

Попробуйте использовать этот CSS:

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

Просто добавьте: .icons-list li { display: inline; } чтобы изменить их с Block-Level element на Inline element .

 .icons-list li {
  display: inline;
} 

 <p>List are Block-Level elements. Therefor they will be displayed below each other.</p>
<ul>
  <li>amp;#x212B;</li>
  <li>amp;#x2126;</li>
</ul>

<br>

<p>By changing them to an inline element (display: inline;) they will be displayed next to each other.</p>
<ul class="icons-list">
  <li>amp;#x212B;</li>
  <li>amp;#x2126;</li>
</ul> 

<li> Маркер создает список элементов. Я думаю, вам следует попробовать использовать <div> вместо.