Положение точки маркера в неупорядоченном списке не работает с текстовой областью - PullRequest
0 голосов
/ 17 мая 2018

Обычно, когда я создаю неупорядоченный список в HTML, он выравнивает точку маркера по верху текста.Если я помещу элемент input внутри элемента li, он будет выровнен по центру.Это все нормально, за исключением того, что когда я добавляю элемент текстовой области, он выравнивается по его нижней части.Вот пример:

<ul>
    <li>Bullet is at <br/>the top</li>
    <li><input type="text" value="Bullet is centered" /></li>
    <li><textarea placeholder="Bullet is too low" ></textarea></li>
</ul>

Приведенный выше код выглядит в Firefox v60.0 следующим образом:

Отображение изображения в Firefox

I'mсоздание редактора WYSIWYG для конкретного приложения.Это в основном закончено, и последнее, что мне нужно сделать, это заставить точку маркера позади текстовой области перейти на вершину, а не на дно.

До сих пор я пытался изменить выравнивание по вертикали по центру, базовой линиии вернемся к элементу li в неупорядоченном списке без успеха.Я также изменил позицию стиля списка на внутреннюю и внешнюю.Мои поиски кого-либо еще, кто сталкивался с этой проблемой, также ничего не изменили.Единственное, что, я думаю, могло бы сработать, - это разместить элементы li относительно, а затем добавить абсолютно позиционированное изображение маркера, но я бы предпочел, чтобы это было последнее средство.

У кого-нибудь есть идеи?Мне нужно решение, которое использует только HTML, CSS, и не знаю, зачем вам это нужно, но с Javascript все в порядке (не JQuery).Это только должно работать в более поздних версиях Firefox.Кросс-браузерная совместимость вообще не нужна.

1 Ответ

0 голосов
/ 17 мая 2018

Попробуйте установить textarea на display: block

textarea {
  display: block;
}
<ul>
    <li>Bullet is at <br/>the top</li>
    <li><input type="text" value="Bullet is centered" /></li>
    <li><textarea placeholder="Bullet is too low" ></textarea></li>
</ul>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...