Показать значение выбора HTML
Я хочу показать все значения поля выбора, такие как первое изображение первое изображение. Но firefox показывает как второй 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>Я вижу, что это проблема с макетом
Нет, это не проблема с макетом, первое изображение в браузере Chrome показывает значения правильно. Второе изображение браузера Firefox показывает значения неправильно. так как решить проблему в firefox
Ответы 3
Я думаю, если вы замените display:inline на вашем #mySelect option на display:inline-block, это может дать вам то, что вы ищете. Если это не сработает, вы также можете поиграть с word-wrap свойство CSS.
Стоит отметить, что у вас будет другой внешний вид в других браузерах ... (я оставил фрагменты кода в качестве доказательства того, что я точно воспроизвел ваш пример)
а в Safari (браузере по умолчанию в Mac OS) это выглядит так:
Я бы рекомендовал использовать flexbox вместо float.
Уловки css имеют отличный гид о том, как использовать flexbox
Что-то вроде (не проверено)
#mySelect {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: space-between;
}
Это связано со стилем вашего #mySelect option.
Может быть, убрать display: inline и добавить ширину 20%?
Согласно этой статье на 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
Это вопрос о том, как показать значение выбора или о том, как решить проблему с макетом? У вас не может быть двух вопросов в одном.