Группа кнопок HTML изменилась на формы, горизонтальная стала вертикальной

Question

Группа кнопок HTML изменилась на формы, горизонтальная стала вертикальной

Я отправляю $obj['_id'] ценность для внешних страниц, так что я надеюсь, что нет более простого способа сделать это, чем создавать формы, подобные приведенным ниже, иначе я себя обманул.

В коде PHP я изменил это:

echo '<td><div class="btn-group" role="group" aria-label="...">
<a class="btn btn-success btn-xs" href="modify.php" role="button">Edit</a>
<a class="btn btn-danger btn-xs" href="del.php" role="button">Del</a></div></td>';

в это:

echo '<td><form name="editform" action="edit.php" method="post">
<input type="hidden" name="editthisid" value="' . $obj['_id'] . '">
<input type="submit" class="btn btn-success btn-xs" name="edit" value="Edit">
</form>
<form name="deleteform" action="del.php" method="post">
<input type="hidden" name="deletethisid" value="' . $obj['_id'] . '">
<input type="submit" class="btn btn-danger btn-xs" name="" value="Del">
</form></td>';

С первым кодом кнопки появились горизонтально, а со вторым кнопки отправки появились вертикально. Ширина веб-страницы не имеет значения, пока я пытался настроить макет таблицы и не смог разместить кнопки по горизонтали.

Я ищу класс для сбора форм в такой группе, как btn-group поэтому они появляются горизонтально, чтобы сэкономить место на макете веб-страницы.

Существуют ли какие-либо формы группирования классов, такие как btn-group? Или это не поможет в любом случае? Если да, есть ли другой способ легко разместить их рядом друг с другом?

РЕДАКТИРОВАТЬ: я даже еще не создал макет CSS.

1

alignment html layout php vertical-alignment

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Теги привязки по умолчанию являются встроенными элементами. Итак, без укладки, несколько <a> теги будут отображаться горизонтально. Однако теги формы по умолчанию блокируют элементы уровня. Так что ваш кратный <form> теги со стеком по вертикали.

Я бы не использовал <table> и связанные <tr> или же <td> теги для макета, если вы на самом деле не рендерит таблицу данных.

Вы почти наверняка хотите использовать CSS здесь, чтобы управлять своим макетом. Попробуйте добавить класс к вашему <form> теги для отображения их в виде элементов inline-block, например:

<style type="text/css">
.inline {
display: inline-block;
}
</style>

<form class="inline">
<input type="submit" class="btn btn-success btn-xs" name="edit" value="Edit">
</form>

<form class="inline">
<input type="submit" class="btn btn-danger btn-xs" name="" value="Del">
</form>

Обновить:

Ах, если вы на самом деле визуализируете таблицу, тогда вы сможете визуализировать формы в ячейках таблицы в пределах одной строки. По умолчанию кнопки будут визуализироваться горизонтально:

<table>
<tr>
<td><form><input type="submit" value="Edit"></form></td>
<td><form><input type="submit" value="Del"></form></td>
</tr>
</table>

Я подозреваю, что если в вашем втором примере выше вы не видите кнопки отправки, визуализируемые по горизонтали, то это потому, что вы неправильно вкладываете <td> элементы в том же <tr> и родитель <table> теги.

1