2016-08-01 9 views
0

PLNKR example of problemラベルのテキストが

を選択したラベルは、グループ化を読み込みますが、文字はすべて何らかの理由で重畳されています。ここで

は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ライブラリを使用しない場合、問題が消えます。とにかく純粋なCSSを維持している間に私がうんざりすることなくラベルフォントを持つことができますか?

+1

'文字間隔をカスタマイズすることができます。-0.31emは;' pure.cssに「 – Satpal

+0

私はドンhttps://plnkr.co/edit/ZHFiu3HrNU37IC5rbZzi?p=preview見ます純粋なCSSライブラリの経験はありますが、私は別のスタイルシートを書いていくつかのルールをオーバーライドできるので問題は解決します。それはあなたのために大丈夫ですか? – geeksal

+0

それはうまくいく@geeksal –

答えて

1

あなたのラベルのCSS

label { 
    letter-spacing: 0.1em; 
} 
関連する問題