18

我有一个段落，其中有两个单独的形式。但是，当页面加载时，每个表单的开始处都会有一个换行符。我正在使用以下代码：

<p style="font-size:14px;font-weight:700;color:grey;">' . $user_pic . ' <a href="profile.php?id=' . $mem_id . '" style="color:#0F39C5;">' . $knockfirst . ' ' . $knocklast . '</a> is knocking. Let him in?
<form action="messages/group/addToChat.php" method="post" name="adduser"><input type="hidden" id="newid" name="newid" value="' . $mem_id . '"><input type="hidden" id="groupid" name="groupid" value="' . $group_id . '"><a href="#" onclick="$(this).closest(\'form\').submit(); return false;" style="color:#0F39C5;font-size:15px;">Yes</a></form>
<form action="messages/group/declineKnock.php" method="post" name="declineuser"><input type="hidden" id="newid" name="newid" value="' . $mem_id . '"><input type="hidden" id="groupid" name="groupid" value="' . $group_id . '"> | 
<a href="#" onclick="$(this).closest(\'form\').submit(); return false;" style="color:#0F39C5;font-size:15px;">No</a></form></p>

当它呈现到页面上时，有什么方法可以将它们保持在同一行？

4

4 回答 4

35

将此添加到您的CSS：

form {
    display: inline-block; //Or display: inline; 
}

小提琴：http: //jsfiddle.net/trW82/

于 2013-09-03T08:38:17.287 回答
5

将float样式添加到第一个表单 -

style="float: left;"

更好的是，创建一个单独的 CSS 类 -

.chatForm {
    float: left;
}

并将此类分配给第一种形式-

<form class="chatForm" ......

您还可以将display两种形式的属性设置为inline或inline-block-

.chatForm, .declineForm {
    display: inline-block; /* or inline */
}

进而 -

<form class="chatForm" .....
<form class="declineForm" ....

演示。

查看display和float上的站点点参考。

于 2013-09-03T08:36:46.887 回答
0

给表单一个宽度（即：style="width:300px"），然后将每个表单包装在一个 span 标签中

<p>
    <span><form style="width:300px;" /></span>
    <span><form style="width:300px;" /></span>
</p>

如果您无法在表单上使用以下样式：

<p>
    <form style="width:300px; display:inline-block;" />
    <form style="width:300px; display:inline-block;" />
</p>

或者你可以试试：

<p>
    <div style="width:300px; display:inline-block;"><form /></div>
    <div style="width:300px; display:inline-block;"><form /></div>
</p>

您可能还希望将样式信息移动到 CSS 类定义中以保持一致性。

在 HTML + CSS 中做事的方式总是不止一种。

祝你好运！

于 2013-09-03T09:03:25.747 回答
0

这里以前的答案都没有指出您的 HTML 一开始就无效的事实。根据HTML 规范，<p>元素不能将 a<form>作为其内容的一部分。

但是由于 HTML 很奇怪，仍然有一种方法可以在同一个（逻辑）段落中包含两个表单，而不是将它们放在 a 中<p>，而是放在 a<div>中，例如：

<div>
    <form style="display: inline;"><input type="submit" value="Submit 1"></form>
    <form style="display: inline;"><input type="submit" value="Submit 2"></form>
</div>

这是根据 Nu HTML Checker的有效 HTML 。

这个解决方案不是很灵活，因为它只有在表单直接位于块元素内时才有效，例如<div>，而后者又只能位于其他块元素内。但据我所知，这是两种形式可以在同一段落中的唯一（有效）方式。

于 2021-02-25T16:05:56.683 回答