Как поставить значок и тег p выровнены на одной строке (материализация css)

Question

Я использую материализацию css вместе с иконками материалов, пытаюсь поставить иконку и рядом с ней несколько цифр, но я не знаю, как это сделать. Вот код:

<i class="material-icons">person</i>
<p>123123</p>

было бы здорово, если бы кто-то мог помочь!

Answer 1

Чтобы сделать это материализованным способом, просто добавьте класс left к значку:

<i class="material-icons left">person</i>
<p>123123</p>

Документация для кнопки проливает некоторый свет на это - именно здесь мы традиционно видим текст и значки рядом сторона в рамках.

https://materializecss.com/buttons.html

<a class="waves-effect waves-light btn"><i class="material-icons left">cloud</i>button</a>

@ 927tanmay ответ технически правильный - левый класс просто добавляет float: left для элемента - но есть не нужно писать inline или extra css, так как левый класс является частью документации и предназначен для использования с иконками.

См. больше в разделе helpers .

Answer 2

Свойство display

Свойство Display по существу отвечает за определение того, как макет ваших элементов.

Блок отображения

Например, старый добрый div по умолчанию имеет свойство отображения block . Это означает, что он заполнит всю доступную ширину и каждый элемент после будет отображен в новой строке . Это также имеет смысл, если вы думаете о слове block .

<div>Div's display defaults to block</div>
<div>Div's display defaults to block</div>

Отображение Inline

Теперь другой известный тег - span , который имеет свойство отображения inline . Это не сломается на новую строку . Это также имеет смысл, если мы думаем о самом слове inline.

<span>span's display defaults to inline</span>
<span>span's display defaults to inline</span>

Видите ли, у нас есть очень простой c способ сказать, что я хочу расположить вертикально или я хочу расположить его горизонтально.

Другие методы

С годами возрастал спрос на более изощренные способы размещения вещей. Раньше люди использовали бы float , но у этого есть много недостатков. В настоящее время в нашем наборе инструментов CSS есть два мощных инструмента. Flexbox и CSS Сетка .

При использовании гибкой коробки вы можете подумать об одной оси, которую можно использовать для разметки элементов, в то время как CSS сетка предложить истинное 2d пространство, которое можно использовать. Я оставляю это читателю, чтобы узнать больше.

Answer 3

Вы должны просто добавить свойство стиля «float: left» в тег значка. Попробуйте приведенный ниже код.

  <i class="material-icons" style="float:left">person</i>
  <p>123123</p>

Answer 4

Я вас не очень хорошо понял, но я предполагаю, что вы хотите поместить числа и значок рядом друг с другом, поэтому вам нужно поместить их в тег div, а затем стилизовать div следующим образом:

<div style="display:flex;">
   <i class="material-icons">person</i>
   <p>123123</p>
</div>

* Браузеры 1003 * могут применять некоторые стили к <p>, например, к полям, поэтому вы можете установить поле: от 0 до <p>, если вам это нужно.

Другим способом получения одинакового результата является установка свойства отображения обоих <p> и <i> до "inline-block"

Answer 5

Замените ваш код следующим:

<p><i class="material-icons">person</i>123123</p>