Размер шрифта в CSS не работает

Я пытаюсь указать размер текста кнопок, расположенных в нижнем колонтитуле страницы приложения JQuery Mobile (chart1). Класс называется «нижний колонтитул» и указан в коде ниже. Неважно, какие значения я указываю (px, em или pt), размер текста, похоже, не изменяется. Есть идеи?Размер шрифта в CSS не работает

<html> 
<head> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> 
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> 

<style> 

    .ui-page { background: #2f2d2d;} 

    .footerBar{ 
     min-height: 80px; 
    } 

    .footer-button{ 
     min-height: 80px; 
     font-size: 20; 
     word-wrap: normal; 
    } 

</style> 

</head> 

<body> 
<!-- code for the main page --> 
<div data-role="page" data-theme="b" id="main-page"> 
    <div data-role="header" data-position="fixed"> 
     <h1>Data Collector</h1> 
    </div> 
    <div data-role="content"> 
     <ul data-role="listview" data-inset="true"> 
      <li data-role="list-divider">Collected Data Available:</li> 
      <li><a href="#chart1" id="btn1" data-transition="slide">Car</a></li> 
      <li><a href="#">Other 2</a></li> 
      <li><a href="#">Other 3</a></li> 
      <li><a href="#">Other 4</a></li> 
     </ul> 
    </div> 
    <div data-role="footer" data-position="fixed"> 
     <h4>&#169 KLH</h4> 
    </div> 
</div> 



<!-- code for the chart 1 page --> 
<div data-role="page" data-theme="b" id="chart1"> 
    <div data-role="header" data-tap-toggle="true" class="headerBar"> 
     <a href="#main-page" data-icon="arrow-l" data-iconpos="left" data-transition="slide" data-direction="reverse">Back</a> 
     <h1>Car Crashes</h1> 
    </div> 
    <div data-role="content" data-position="fixed"> 
     <div id="containerYear"></div> 
    </div> 
    <div data-role="footer" data-position="fixed" class="footerBar"> 
     <div data-role="navbar"> 
      <ul> 
       <li><a href="#chart1" data-role="tab" class="ui-btn-active footer-button">Last 12 Months</a></li> 
       <li><a href="#chart2" data-role="tab" class="footer-button">Last 30 Days</a></li> 
       <li><a href="#chart3" data-role="tab" class="footer-button">Last 7 Days</a></li> 
      </ul> 
     </div> 
    </div> 

</div>

источник

2013-02-28 Anto

Я думаю, вам нужно добавить тип размер шрифта - 'px',' pt', 'em','% ' – Pete

JQM переопределяет ваш стиль. Удалите jqm css include и посмотрите, не по-прежнему ли он работает. – Morpheus

Вы должны предназначаться этот класс .ui-БТН-TEXT

...

.footer-button .ui-btn-text { 
    font-size: 20px; 
}

источник

2013-02-28 11:31:30

+1 Live Demo: http://jsfiddle.net/tUdF3/ – Curt

-1

Добавить блок суффикс ("точек") для размера шрифта, как это:

.footer-button{ 
     min-height: 80px; 
     font-size: 20px; 
     word-wrap: normal; 
    }

источник

2013-02-28 11:28:39 Mortalus

-1 Читайте вопрос «Неважно, какие значения я указываю (px, em или pt)' – Curt

Если вы проверите источник с помощью Chrome, вы увидите, что JQuery Mobile добавляет некоторые промежуточные классы.

Чтобы сделать длинную историю Короче говоря, это работает

.footer-button .ui-btn-text { 
    min-height: 80px; 
    font-size: 50px; 
    word-wrap: normal;

}

источник

2013-02-28 11:38:26 mike

Повторный ответ повторяется. –

Вы также применяете свойства 'min-height' и' word-wrap' к 'ui-btn-text' с помощью этого кода. Это даст другой результат. – Curt

Размер шрифта в CSS не работает

ответ

Смежные вопросы