标签文本被纯CSS选择弄乱了

Question

该标签显示为“分组依据”，但是由于某种原因，所有字母都被叠加了。

这是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的同时我还能拥有标签字体而不会弄乱？

Answer 1

您可以自定义标签CSS

label {
   letter-spacing: 0.1em;
}

标签文本被纯CSS选择弄乱了

问题描述

1 个解决方案

解决方案1
1 已采纳

标签文本被纯CSS选择弄乱了

问题描述

1 个解决方案

解决方案1 1 已采纳

解决方案1
1 已采纳