试图得到两个链接(这是真正的形式)在页面上的同一行 - Trying to get two links (which are really forms) to line up on same line on page

Trying to get two links (which are really forms) to line up on same line on page

本文关键字：一行两个链接 | 更新日期: 2023-09-27

我试图在每个结果的foreach循环中显示两个文本链接。但是这些链接将被PDO数据库调用来删除或更新，所以我需要将它们列为样式看起来像文本的表单。我的问题是如何让这两个链接(作为表单)像这样并排显示:表单批准|表单删除?

当前是这样的:

Form Approve (as a button)
|
Form Delete (as a button)

下面是到目前为止的代码:

<?php
echo "<hr>" . $results[text];
?>
<form action="" method="post"><button type="submit" class="formlink">Approve</button>
</form>&nbsp;|&nbsp;<form action="" method="post"><button type="submit"
class="formlink">Delete</button></form>

在STYLE.CSS:

button.formlink {
-moz-user-select: text;
background: none;
border: none;
color: blue;
cursor: pointer;
font-size: 1em;
margin: 0;
padding: 0;
text-align: left;
display:inline-block
}
button.formlink:hover span {
text-decoration: underline;
}

对于PHP的人来说，我更希望这些链接可以在PHP中作为表单返回....

添加style="display:inline-block"。

请参考小提琴

CSS

form {
    display:inline-block;
}

这只是为了演示，避免样式化 element，而是将class添加到form并将display:inline-block规则添加到类

由于form元素被当作block级别的元素出现在下一行，您可以使用display:inline-block将它们放在一行。

另外你可以使用最新的CSS3属性flex

我敢肯定你正在使用任何容器，如div包含这些形式。

所以如果你应用display:flex;的形式也会对齐。检查Flex DEMO。

像这样的CSS。

form{display:inline-block}
div{ display:flex;} /*Assuming the forms are inside this div*/