Кнопка выравнивания начальной загрузки для формы кнопки отправки в td
Я использую bootstrap в своем приложении Symfony, и в своем действии index я показываю таблицу со всеми элементами и двумя кнопками для обновления или удаления элемента. На самом деле я не использую кнопки, я использую одну кнопку, чтобы изменить сущность, и форму со скрытыми входами, и кнопку отправки, чтобы удалить этот элемент. В настоящее время кнопка отправки отображается под кнопкой обновления, и я хочу, чтобы две кнопки были выровнены. Заранее спасибо, если у вас есть решение моей проблемы вот мой код:
<td>
<a href = "/app_dev.php/quotes/2/edit" class = "btn btn-sm btn-primary">Modifier</a>
<form action = "/app_dev.php/quotes/2/delete">
<input type = "hidden" name = "_method" value = "DELETE">
<button type = "submit" class = "btn btn-sm btn-danger">Supprimer</button>
</form>
</td>
вы хотите выровнять обе кнопки в одну строку?
Радж, да, я хочу, чтобы эти две кнопки были выровнены в одну линию
Ответы 6
Вы можете добиться этого разными способами. Одна простая форма - добавить float: left к ссылке, например:
<td>
<a href = "/app_dev.php/quotes/2/edit" class = "btn btn-sm btn-primary" style = "float: left">Modifier</a>
<form action = "/app_dev.php/quotes/2/delete" >
<input type = "hidden" name = "_method" value = "DELETE">
<button type = "submit" class = "btn btn-sm btn-danger">Supprimer</button>
</form>
</td>
Спасибо за ответ, это начало, но между кнопками огромное пространство.
После того, как все будет выровнено, вы можете оформить пространство так, как хотите. Как это: <td> <a href = "/app_dev.php/quotes/2/edit" class = "btn btn-sm btn-primary" style = "float:left; margin-right:5px;">Modifier</a> <form action = "/app_dev.php/quotes/2/delete"> <input type = "hidden" name = "_method" value = "DELETE"> <button type = "submit" class = "btn btn-sm btn-danger">Supprimer</button> </form> </td>
Во-первых, я не понимаю, почему вы используете форму. вы можете легко вызвать желаемый URL-адрес с параметром в событии onClick.
Но все же, если это необходимо, вы можете добавить свойство в форму, и его элемент должен быть style = "display:inline-block;", или можно написать отдельный CSS.
form {
display:inline-block;
}
Я использую форму для csrf_protection. Я не хочу, чтобы пользователь мог вызывать этот URL-адрес с помощью метода GET. Я попробую ваше решение спасибо
<td class = "flex">
<a href = "/app_dev.php/quotes/2/edit" class = "btn btn-sm btn-primary">Modifier</a>
<form action = "/app_dev.php/quotes/2/delete">
<input type = "hidden" name = "_method" value = "DELETE">
<button type = "submit" class = "btn btn-sm btn-danger">Supprimer</button>
</form>
</td>
в вашем css:
.flex {
display: flex;
}
хороший источник для отображения с flex https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/la-mise-en-page-avec-flexbox (на французском)
this will be helpful
<style>
.div1, .div2{
display: inline-block;
}
</style>
<body>
<td>
<div class = "div1"><a href = "/app_dev.php/quotes/2/edit" class = "btn btn-sm btn-primary">Modifier</a></div>
<div class = "div2"><form action = "/app_dev.php/quotes/2/delete">
<input type = "hidden" name = "_method" value = "DELETE">
<button type = "submit" class = "btn btn-sm btn-danger">Supprimer</button>
</form></div>
</td>
</body>
Див в тд? Это действительно так?
div внутри td в порядке!
HTML
<td class = "button-container">
<a href = "/app_dev.php/quotes/2/edit" class = "btn btn-sm btn-primary">Modifier</a>
<form action = "/app_dev.php/quotes/2/delete">
<input type = "hidden" name = "_method" value = "DELETE">
<button type = "submit" class = "btn btn-sm btn-danger">Supprimer</button>
</form>
</td>
CSS
.button-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
}
Дополнительно можно сделать кнопку 100%
.button-container .btn {
width: 100%;
}
Хорошо, спасибо всем за ваши ответы, я обнаружил, что выровнял эти две кнопки с помощью классов гибкости начальной загрузки, вот решение целого:
<td class = "d-flex flex-row">
<a href = "{{ path('wallofquotes_quote_update', {'id': quote.id}) }}" class = "btn btn-sm btn-primary mr-1">{{ 'wallofquotes.ui.update'|trans }}</a>
<form method = "POST" action = "{{ path('wallofquotes_quote_delete', {'id': quote.id}) }}">
<input type = "hidden" name = "_method" value = "DELETE">
<button type = "submit" class = "btn btn-sm btn-danger">{{ 'wallofquotes.ui.delete'|trans }}</button>
</form>
</td>
Левые края совпадают. Они находятся выровнены. (Предположительно, вы имеете в виду «выровнены каким-то другим образом», но вы не сказали, что это такое!)