HTML 表单 - 不会与直线链接一起显示

Question

我有一个包含表单和链接的div，我希望以直线显示。窗体显示正确...。链接返回到下一行，并且完全在div 之外。我已经梳理了html和css，找不到问题。

请注意，我已经尝试white-space:nowrap.

div 的 HTML：

<div class="container">
<form action="" method="post">
<b>Text Here</b>
<input type="radio" name="" value="">Option</input>
<input type="radio" name="" value="">Option</input>
<input type="search" placeholder="">
<input type="submit" name="" value="Search!">
</form>
<a href="">Compose</a>
</div>

div 的 CSS：

.container{
margin-top: 5px;
float: right;
width: 75%;
height: 50px;
white-space: nowrap;
border: 2px solid black;
}

Answer 1

将class用于form和link，并带有display: inline-block;

.container{
margin-top: 5px;
float: right;
width: 75%;
height: 50px;
white-space: nowrap;
border: 2px solid black;
}
form {
display: inline-block;
}
.link {
display: inline-block;
}

<div class="container">
<form action="" method="post">
<b>Text Here</b>
<input type="radio" name="" value="" />Option
<input type="radio" name="" value="" />Option
<input type="search" placeholder="" />
<input type="submit" name="" value="Search!" />
</form>
<a href="" class="link">Compose</a>
</div>

Answer 2

您的<a>标签在您的<form>之外。只需将其包含在表单中即可将所有元素放在一条行中。此外，<input>是一个 void 元素，因此没有结束标记。

这在以下方面得到了修复：

.container {
margin-top: 5px;
float: right;
width: 75%;
height: 50px;
white-space: nowrap;
border: 2px solid black;
}

<div class="container">
<form action="" method="post">
<b>Text Here</b>
<input type="radio" name="" value="" />Option
<input type="radio" name="" value="" />Option
<input type="search" placeholder="" />
<input type="submit" name="" value="Search!">
<a href="">Compose</a>
</form>
</div>

如果您希望链接位于<form>之外，则需要为display: inline-block和<form>提供一个足够小的width，以在同一行中包含链接。在下文中，我为这两个元素提供了50%width：

.container {
margin-top: 5px;
float: right;
width: 75%;
height: 50px;
white-space: nowrap;
border: 2px solid black;
}
form, a {
width: 50%;
display: inline-block;
}

<div class="container">
<form action="" method="post">
<b>Text Here</b>
<input type="radio" name="" value="" />Option
<input type="radio" name="" value="" />Option
<input type="search" placeholder="" />
<input type="submit" name="" value="Search!">
</form>
<a href="">Compose</a>
</div>

但是请注意，实际上没有足够的空间将所有这些信息包含在宽度较窄的一行上，因此您可能需要添加滚动或将一些信息向下拖放到媒体查询内的下一行。