标签文本与纯 CSS 选择混淆

Question

PLNKR example of problem

标签上写着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 库，问题就会消失。无论如何我可以在保持纯 CSS 的同时不弄乱标签字体吗？

Answer 1

您可以自定义标签 css

label {
   letter-spacing: 0.1em;
}