문자열의 문자를 CSS 크기가 다른 문자로 정렬

문자열의 다른 문자와 다른 크기 인 < ALL APPS 문자열의 일부인 <이 있습니다. ::first-character 선택자를 사용하여 크기를 변경할 수 있습니다. 그러나 나머지 문자는 아래의 첫 번째 이미지와 같이 텍스트 중앙에 나타나야합니다.문자열의 문자를 CSS 크기가 다른 문자로 정렬

_nav.html.erb

.allapps { 
    a { 
    font-size: 12px; 
    line-height: 2; 
    } 

    a::first-letter { 
    font-size: 29px; 
    margin: 10px 5px 10px 18px; 
    line-height: 1; 
    } 
}

.scss

<div class='well well-lg'> 
    <ul class='nav nav-pills'> 
    <li class='allapps bold'><%= link_to '< ALL APPS', list_apps_path %></li> 
    <li class="<%= 'active' if @version_type == "test" %> pull-right"> 
     <%= link_to 'TEST', list_versions_path(params["app_id"], version_type: :test)%> 
    </li> 
    <li class="<%= 'active' if @version_type == "main"%> pull-right"> 
     <%= link_to 'MAIN', list_versions_path(params["app_id"], version_type: :main) %> 
    </li> 
    </ul> 
</div>

는

enter image description here

실제

소망

출처

2015-01-28 Antarr Byrd

공유 할 수있는 [jsfiddle] (http://jsfiddle.net/)이 있습니까? –

': first-letter'는 블록 레벨 요소에만 적용됩니다. 당신은 슈퍼 비상식 수 있으며 '

<hello

' – Chad

과 같은 무언가를 말할 수도 있습니다 @chad 여전히 동일하게 나타납니다 그 –

"<"기호의 세로 배치를 설정해야합니다. vertical-align에는 구현시 특기 및 차이점이 있으므로 상대 위치 지정을 사용하는 것이 가장 좋습니다. :first-letter이 문자가 아닌 문자 (알파벳)와 일치한다는 보장이 없기 때문에 스타일을 지정하기 위해 span 요소에 "<"문자를 래핑해야합니다. 사양이 모호하고 구현이 다릅니다.

단순한 순수 HTML 및 CSS 데모 :

.allapps { 
 
    font-size: 12px; 
 
    font-family: Arial, sans-serif; 
 
    font-weight: bold; 
 
} 
 

 
.allapps .lt { 
 
    font-size: 29px; 
 
    position: relative; 
 
    top: 6px; 
 
}

<div class=allapps><span class=lt>&lt;</span> ALL APPS</div>

변위의 정확한 양 (샘플 코드에서 top 값)은 경험적으로 결정될 필요가있다; 글꼴 (및 판단)에 따라 다릅니다.

출처

2015-01-28 18:25:59

문자열의 문자를 CSS 크기가 다른 문자로 정렬

답변

관련 문제