2016-08-01 3 views
0

PLNKR example of problem레이블 텍스트는

레이블 그룹으로를 읽고 선택 순수 CSS로 엉망이 있지만, 문자는 모두 어떤 이유로 중첩된다. 나는 순수 CSS 라이브러리를 사용하지 않는 경우

<!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> 

문제는 사라집니다 : 여기

는 HTML입니다. 어쨌든 내가 순수 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; 
}