Текст метки перепутан с выбором Pure CSS

0

Пример проблемы PLNKR

Ярлык читает Group By, но по некоторым причинам буквы накладываются друг на друга.

Вот HTML:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Label font</title>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/0.6.0/pure.css">
  <script src="script.js"></script>
  <link rel="stylesheet" href="style.css">

  <link rel="stylesheet" href="//builder.yaas.io/public/js/vendor/bootstrap/dist/css/bootstrap.min.css">

</head>

<body ng-app="app">

  <div ng-controller="UICtrl">

    <form class="pure-form pure-form-aligned">
      <fieldset>

        <div class="pure-g">
          <div class="pure-u-md-1">
            <label for="graphType">Group By: </label>
            <select id="graphType" class="pure-input-1">
              <option disabled selected value> -- Select a Graph Type --</option>
              <option> Graph type 1 </option>
            </select>

          </div>
        </div>
      </fieldset>
    </form>
  </div>

</body>

</html>

Проблема уходит, если я не использую чистую библиотеку CSS. Есть ли в любом случае я могу иметь шрифт ярлыка, не испортив его, сохраняя Pure CSS?

  • 1
    letter-spacing: -0.31em; в pure.css см. plnkr.co/edit/ZHFiu3HrNU37IC5rbZzi?p=preview
  • 0
    У меня нет опыта работы с библиотекой Pure CSS. Однако я могу написать еще одну таблицу стилей, переопределяющую некоторые правила, поэтому проблема исчезнет. Это нормально для тебя?
Показать ещё 3 комментария
Теги:
pure-css

1 ответ

1
Лучший ответ

Вы можете настроить свой ярлык css

label {
   letter-spacing: 0.1em;
}

Ещё вопросы

Сообщество Overcoder
Наверх
Меню