在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 2013-02-28 11:28:59

JQM正在壓倒你的風格。刪除jqm的CSS包括，看看它是否仍然無法正常工作。 – Morpheus 2013-02-28 11:29:10

你需要針對這個類的.ui-BTN-文本

所以...

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

來源

2013-02-28 11:31:30

+1現場演示無關緊要：http://jsfiddle.net/tUdF3/ – Curt 2013-02-28 11:33:47

-1

添加單元后綴（「PX」）的字體大小是這樣的：

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

來源

2013-02-28 11:28:39 Mortalus

-1閱讀問題'我指定什麼樣的值（px，em或pt）' – Curt 2013-02-28 11:35:04

如果您使用Chrome檢查源代碼，您會看到JQuery Mobile添加了一些干預類。

爲了使長話短說：這個作品

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

}

來源

2013-02-28 11:38:26 mike

重複的答案會重複。 – 2013-02-28 11:45:09

您也正在使用此代碼將'min-height'和'word-wrap'屬性應用於'ui-btn-text'。這將產生不同的輸出。 – Curt 2013-02-28 15:18:17

在CSS中的字體大小不工作

回答

相關問題