Блог

Главная - Вопросы по программированию - Как переместить значок в этом гибком контейнере влево?

Как переместить значок в этом гибком контейнере влево?

#html #css #reactjs

Вопрос:

У меня есть этот контейнер для таблеток с текстом и значком, и вот как он выглядит в настоящее время:

введите описание изображения здесь

Однако я хочу, чтобы значок был больше слева и выглядел так:

введите описание изображения здесь

Как бы я поступил с этим?

Это мой код:

 <span class="healthy">
  <a href="#"> 
    <div className="template-pill">
      <img className="pill-icons" src={healthy_logo} />
      <p> Healthy </p>
    </div>
  </a>
</span>

И это мой стиль:

 .healthy a {
  display: inline-block;
  border-radius: 1em;
  font-size: 12px;
  line-height: 12px;
  font-weight: 700;
  background: #62AC00;
  color: #FFFFFF;
  padding: 4px 12px;
  margin-right: 10px;
  vertical-align: top;
  text-decoration: none;
}

.healthy:link, .healthy:visited {
  color: #FFFFFF;
  text-decoration: none;
}
.template-pill {
  display: flex;
  align-items: center;
  height: 20px;
}

.pill-icons {
  height: 20px;
  width: 20px;
  padding-right: 5px;
}

Любая помощь будет признательна!
Большое вам спасибо!

Комментарии:

1. При заполнении .healthy a создается одинаковое расстояние по обе стороны кнопки. Если вы хотите уменьшить расстояние слева, уменьшите отступ слева.

2. Это сработало, большое вам спасибо

Ответ №1:

Первым делом уменьшите healthy a заполнение его 12 теперь сделайте его ниже,

 .healthy a {
     padding: 4px 6px;
     
}

и вы можете удалить текст с margin-left помощью добавления в p тег

 p:{

     margin-left: 10px;

}

Ответ №2:

Вы можете переместить значок в левую сторону с помощью margin-left: -X px . Здесь X-это значение вашего желания px. Вам нужно только отдать его img тегу.

 .pill-icons { margin-left: -5px; }
Метки: