Материализовать значки, почему arrow_right занимает больше места, чем arrow_left

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">     
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div class="col s12">
   <a class="btn right light-blue lighten-3 black-text" id="addDataBtn"><i class="material-icons">arrow_forwards</i></a>
   <a class="btn left light-blue lighten-3 black-text" id="addDataBtn"><i class="material-icons">arrow_back</i></a>
</div>

enter image description here

<div class="col s12">
   <a class="btn right light-blue lighten-3 black-text" id="addDataBtn"><i class="material-icons">arrow_back</i></a>
   <a class="btn left light-blue lighten-3 black-text" id="addDataBtn"><i class="material-icons">arrow_back</i></a>
</div>

enter image description here

Как видите, из приведенных выше фрагментов кода. По какой-то причине значки fowards_arrow и back_arrow занимают разное количество места. Это упущение? Как сделать их симметричными?

Обновлено: добавлена ​​материализация таблицы стилей, чтобы другие могли копировать код.

Попробовал, здесь проблем нет jsfiddle.net/oykd9jpL Добавьте свой использованный css к вопросу. Я думаю, что ваша проблема с классом права

Grumpy 23.04.2022 09:19

Эй, братан, обновил код, чтобы включить таблицу стилей materialize. jsfiddle.net/sqv5gfzr

Lucho 24.04.2022 08:44

Привет, измени arrow_forwards на arrow_forward, вот и все.

Grumpy 24.04.2022 09:22
3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
1
3
37
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Удалите s из arrow_forwards

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">     
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    
    <div class="col s12">
       <a class="btn right light-blue lighten-3 black-text" id="addDataBtn"><i class="material-icons">arrow_forward</i></a>
       <a class="btn left light-blue lighten-3 black-text" id="addDataBtn"><i class="material-icons">arrow_back</i></a>
    </div>

Другие вопросы по теме