显示 HTML 选择值答案

【问题标题】：Show HTML select value显示 HTML 选择值
【发布时间】：2018-04-03 06:39:44
【问题描述】：

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

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

<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>

【问题讨论】：

这个问题是关于如何显示选择值还是关于如何解决布局问题？ 1 中不能有 2 个问题。
我发现这是一个布局问题
不，不是布局问题，第一个图像 chrome 浏览器正确显示值。第二个图像 Firefox 浏览器显示的值不正确。那么如何解决Firefox中的问题

标签： html select html-select

【解决方案1】：

我会推荐使用 flexbox 而不是 float。

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

类似的东西（未测试）

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

【讨论】：

这和你#mySelect option的风格有关
也许删除display: inline 并添加20% 的宽度？

【解决方案2】：

我认为，如果您将 #mySelect option 上的 display:inline 更改为 display:inline-block，这可能会满足您的需求。如果这不起作用，您还可以使用word-wrap CSS property。

值得注意的是，您在其他浏览器中的外观会有所不同...（我留下了代码 sn-ps 以证明我完全复制了您的示例）

在 Chrome 中它看起来像这样：

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

【讨论】：

【解决方案3】：

根据 Mozilla.org (https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms) 上的这篇文章 - 某些表单小部件（如 select 元素）很难或不可能在不遇到浏览器问题的情况下进行样式设置（就像您使用 firefox 所做的那样）

您可以跳过文章的大部分内容，但请注意以“处理选定的噩梦”开头的部分 - 他们在那里展示了解决您的问题的一些想法。

引用这篇文章：“如果你想完全控制表单小部件，你别无选择，只能依赖 JavaScript。”

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

【讨论】：