Question

我希望显示所有选择框值，例如第一张图片first image。但firefox显示为第二张图片second image。如何解决这个问题

＆＃13;

#mySelect
{
	width:300px;
    height:200px;
    overflow:hidden;
}
#mySelect option
{
	float:left;
    border:1px solid #000;
    display:inline;
 }

＆＃13;

<form>
  <select id="mySelect" size="4">
    <option>Apple</option>
    <option>Orange</option>
    <option>Pineapple</option>
    <option>Banana</option>
     <option>Orange</option>
    <option>Pineapple</option>
    <option>Banana</option>
  </select>
</form>

＆＃13;

Answer 1

我建议使用flexbox而不是float。

Css技巧有a great guide关于如何使用flexbox

像（未经测试）

之类的东西

#mySelect {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: space-between;
}

Answer 2

我认为，如果您将display:inline上的#mySelect option更改为display:inline-block，可能会为您提供您正在寻找的内容。如果这不起作用，您还可以使用word-wrap CSS property。

值得注意的是，在其他浏览器中你会有不同的外观......（我把代码片段留作了我完全复制你的例子的证明）

在Chrome中，它看起来像这样：

并在Safari（Mac OS上的默认浏览器）中，它看起来像这样：

Answer 3

根据Mozilla.org上的这篇文章（https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms） - 一些窗体小部件（如select元素）很难或不可能在不遇到浏览器问题的情况下进行样式化（就像你使用firefox一样）

你可以跳过这篇文章的大部分内容，但要注意它开头的部分＆＃34;处理选择的噩梦＆＃34; - 他们展示了一些解决问题的想法。

引用文章：＆＃34;如果您希望完全控制表单小部件，您别无选择，只能依赖JavaScript。＆＃34;

以下文章也可以提供帮助：https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets

显示HTML选择值

3 个答案: