如何将HTML <form>显示为图像旁边的内联元素？</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;
}

绝对不行。用于提交隐藏表单（电子邮件图标）的图像拒绝保持内联。

感谢您的帮助！任何想法/解决方案都表示赞赏。

P.S。试着忽略首席营销官拼错了哈哈。

Answer 1

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

form { display: inline }

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

您不需要任何其他内容，因为img元素默认为内联。

如果移动img元素中的form元素，则甚至不需要单个CSS规则。

Answer 2

你也必须浮动图像。 display: inline在那里什么都不做，所有浮动元素都是block。

Answer 3

将图像环绕div向右浮动。