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

Question

我在网页上显示选择元素时遇到了一些问题。我试图将select元素显示为文本流的一部分，这样用户就不会注意到它实际上是一个select元素（除了下面的边框）。它应该像常规词一样行事。目前我有这个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中，选择项被强制进入行的第一项，因此select元素位于“only：”之前（下面的第二张图片）。另一方面，在Firefox中，select元素被放在一个新行上。

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

Answer 1

试试这个：

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

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