如何使这两个元素彼此相邻

Posted 2023-03-14

【中文标题】如何使这两个元素彼此相邻

【英文标题】：How to keep these two elements next to eachother

【发布时间】：2013-03-16 22:10:09

【问题描述】：

所以早些时候我正在编写我的网站联系表单，我想制作它，所以我不得不选择返回或发送。但我注意到他们没有在一起。现在，我知道这可能是一个非常愚蠢的问题，但我刚从假期回来，所以我脑子里放了一个大屁。我很想得到我能得到的所有帮助。

这是我的 html：

<p>Go Back <sup>or</sup></p><input type="submit" value="Send!" name="submit" />

我希望我能展示一张图片，但我现在不能。

【问题讨论】：

您可以制作“返回”和“发送”超链接，这样可以减轻您的工作负担。

你试过什么？另外，将input 放入您的p 中，看看是否可以解决问题。

【参考方案1】：

<p></p> 标记的作用类似于对 HTML 文档中的内容进行分段的中断。在段落中包含提交按钮以避免中断。

<p>Go Back <sup>or</sup> <input type="submit" value="Send!" name="submit" /></p>

【讨论】：

你的描述有点模糊。简单的说; <p> 标签是块样式，这意味着它将在其下包装内容，除非您使用像 float 这样的技术。通过将<p>-标签更改为inline-block，它将获得内联标签的属性（如<span>），并允许在其周围放置其他内容，而不会破坏空间。

【参考方案2】：

将此样式添加到<p> 标签：

display: inline-block;

示例：http://jsfiddle.net/jUS7Y/1/

p 
    display: inline-block;

尝试在其上使用类或 id，否则所有<p>-tags 将变成inline-blocks。

HTML

<p class="myDescription">Go Back <sup>or</sup></p>
<input type="submit" value="Send!" name="submit" />

CSS

.myDescription 
    display: inline-block;

【讨论】：

或者只是在p 中插入input。或将p 更改为内联元素（即span）。

@nd_macias 同意 :) 这个答案是从字面上理解 OP 的问题 ;)