Question

我在html模板中有两个按钮，一个在窗体内，另一个在窗口外面。如何通过CSS对它们进行样式设置以使它们显示为内联？在第二个按钮中包含display: inline不起作用。

E.g。查看以下代码段，OK_1和OK_2如何内联显示（仅使用CSS）：

<form action="some_url" method="POST" enctype="multipart/form-data">
  <!-- some form -->
  <input class="button" type="submit" value="OK_1">
</form>
<button>OK_2</button>

Answer 1

添加display: inline-block应该可以解决问题。

＆＃13;

form {
  display: inline-block;
}

＆＃13;

<form action="some_url" method="POST" enctype="multipart/form-data">
  <!-- some form -->
  <input class="button" type="submit" value="OK_1">
</form>
<button>OK_2</button>

＆＃13;

Answer 2

只需将父级设为灵活容器：

body { display: flex; }

<form action="some_url" method="POST" enctype="multipart/form-data">
<!-- some form -->
<input class="button" type="submit" value="OK_1">
</form>
<button>OK_2</button>

在flex formatting context中，flex项（Flex容器中的子元素）默认排成一行。

Answer 3

尝试这个：

这是一个可运行的代码段。

find()

form input[type="submit"] {
  display: inline-block;
  padding: 10px;
  background-color: #000000;
  color: #ffffff;
  float: left;
  margin:5px;
}
.button {
  display: inline-block;
  padding: 10px;
  background-color: #000000;
  color: #ffffff;
  border: 0;
  float: left;
  margin:5px;
}

您可以自定义上面的所有样式。

Answer 4

您应该为表单提供一个类，以便其他表单不会这样做。

form.inline_after {
  display: inline-block;
}

<pre>↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
↓The form element is <span style="border: 4px dotted red; color: magenta; background-color: maroon;">in red</span>!↓
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓</pre>
<form style="border: 4px dotted red; color: magenta; background-color: maroon;" class="inline_after" action="some_url" method="POST" enctype="multipart/form-data">
  <!-- some form -->
  <input style="margin: 5px; padding: 5px; color: magenta; background-color: maroon;" class="inline_after" class="button" type="submit" value="Button in the form!" onclick='alert("This is in the "+this.parentElement.nodeName+" element!")'>
</form>
<button style="padding: 5px;" onclick='alert("This is in the "+this.parentElement.nodeName+" element!")'>
  Button out of the form, but inline!
</button>

Answer 5

为表格制作css：

<form action="some_url" method="POST" enctype="multipart/form-data">
  <!-- some form -->
  <input class="button" type="submit" value="OK_1">
</form>
<button>OK_2</button>

where

这是一个简短的回答：）

内联两个按钮 - 一个位于<form>内，一个位于外部

5 个答案: