html - 如何将 HTML <FORM> 显示为图像旁边的内联元素？

Question

我有一些图片，其中一张可以提交隐藏表单。

我的问题是我需要所有图像相互内联显示。带有表单提交的图像拒绝这样做。

基本上，代码是这样的:

  <img class="inline" src="image.png" />
  <img class="inline" src="image2.png" />
  <img class="inline" src="image3.png" />

<form action="/forms/important-form.php" method="POST">
 <INPUT TYPE="hidden" NAME="infoForForm" VALUE="Information">
 <INPUT TYPE="hidden" NAME="URL" VALUE="/employee-xyz76r3-headshot.png">
 <INPUT TYPE="hidden" NAME="employeeTitle" VALUE="Salesperson" >
 <input type="image" class="inline" src="email.png" alt="Submit Form" />
</form>

像这样的 CSS:

 .inline {
  display: inline!important;
  float: right;
}

不过确实不行。用于提交隐藏表单(电子邮件图标)的图像拒绝保持内联。

感谢大家的帮助!任何想法/解决方案表示赞赏。

附言尽量忽略首席营销官拼写错误哈哈。

Answer 1

这里的问题是 form 元素默认是 block 元素。要更改此设置，使图像显示在同一行，只需要以下 CSS 规则:

form { display: inline }

好吧，您还需要将 img 元素中的 href 属性更改为 src 属性，但如果没有此修复，前三个图像会根本不显示。

您不需要任何其他东西，因为 img 元素默认是内联的。

如果将 img 元素移动到 form 元素中，您甚至不需要那条 CSS 规则。