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

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>

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

Источник

1 ответ

Решение

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

label {
   letter-spacing: 0.1em;
}
Источник
Другие вопросы по тегам