选择元素作为文本流的一部分答案

【问题标题】：Select element as part of the text flow选择元素作为文本流的一部分
【发布时间】：2012-03-27 20:28:32
【问题描述】：

我在网页上显示选择元素时遇到了一点问题。我试图将一个选择元素显示为文本流的一部分，这样用户就不会注意到它实际上是一个选择元素（除了下面的边框）。它应该像一个普通的单词一样。目前我有这个 HTML 代码：

<form method="get" action="population.php">
<p>Just show me information about only: <select name="f"><option>a</option><option>b</option></select>.</p>
</form>

有了这个 CSS 代码：

form {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    display: inline;
}
form select {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    width: auto;
    border: 0px solid #FFFFFF;
    border-bottom: 1px solid #2C5E93;
    font-family: inherit;
    font-size: inherit;
    display: inline;
}

此代码不起作用。它应该像我在下面放的第一张图片。但是，在 Safari 中，选择项被强制进入该行的第一项，因此选择元素位于“仅：”之前（下面的第二张图片）。另一方面，在 Firefox 中，选择元素被完全放在一个新行中。

有谁知道如何解决这个问题？感谢正手！

【问题讨论】：

我会在带有表单控件的表单中使用真实标签...但是您的表单周围是什么？文本所在的容器有多宽？你说 Firefox 正在创建一个新行...这是因为文本换行吗？
嗯，好主意！我的表单被一个宽度为 240 像素的 div 包围。文字确实在换行。但是，即使我使用带有选择项的标签，它仍然不起作用：在 Safari 中，一旦文本换行，选择元素就会被强制到行的第一项。在 Camino 中，选择元素被放入新行。当我将 select 元素放在标签之后时，select 元素会在两个浏览器中都放在一个新行上......你知道我该如何解决这个问题吗？
我认为你需要更新你的代码，给我们更多的周边元素。每当我写一个表单时，在我添加 CSS 之前，标签自然会在选择和其他输入旁边......默认情况下不会创建换行符，并且大多数浏览器似乎都会制作输入/等内联块（或内联）。所以也许一些更多的 HTML 和相关的 CSS，或者 JS 小提琴......会有所帮助。

标签： html css forms xhtml

【解决方案1】：

试试这个：

<style>
    .seldiv { display: inline; }
</style>

select
<div class="seldiv">
    <select>
        <option>123</option>
        <option>456</option>
    </select>
</div>
any

【讨论】：

这不起作用。首先，我不能将
放在
中，因为

会被浏览器自动关闭。即使我将

更改为，它仍然不起作用。然后第一行的文本不再换行：它甚至在父
之外继续。您还有其他想法吗？
我刚刚重新检查了它，它真的对我不起作用......也许你没有看到问题，因为它在你的例子中不是一个段落的孩子。还是不是形式的孩子？
我刚刚尝试了您的确切代码。见it。
可能是因为你的代码没有包含在另一个宽度相对较小的div中？我将 Camino 2.0.8 与 Gecko 引擎（= Firefox 引擎）1.9.0 一起使用。您使用的是较新的版本吗？然而，这在 Safari 中不起作用……你怎么看？