Создание строки с алфавитом

Question

Мне нужно руководство HTML/CSS. Моя цель - создать экран списка контактов в моем приложении и, как и большинство экранов списка контактов, пользователи должны иметь возможность выбрать букву, с которой начинается имя, и приложение будет фильтровать эту букву. Достаточно легко.

Как я хотел бы интерфейс, чтобы посмотреть что-то вроде этого:

Find by Name | all # a b c d e f g h i j k l m n o p q r s t u v w x y z 

Где все, чтобы справа от | это интерактивная ссылка.

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

Текст «Найти по имени» может в другом модуле читать: «Найти по имени улицы», так что это также не фиксированная ширина.

Как это лучше всего выполнить в css/html? Если это имеет значение, я не использую шрифт с фиксированной шириной.

Answer 1

Поместите каждую букву в элемент шириной 3,8% (100/26).

Недостатком этого является то, что вы столкнетесь с некоторыми нечетными проблемами округления в некоторых браузерах.

Лично я бы не стал заставлять их охватывать всю ширину. То, как вы сейчас выглядите, кажется визуально правильным.