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;
}

标签文本与Pure CSS select混乱

1 个答案: