0

JQuery Mobileアプリケーションページ（chart1）のフッターにあるボタンのテキストのサイズを指定しようとしています。クラスの名前は「footer-button」で、以下のコードでスタイルが設定されています。指定する値の種類（px、em、pt）は関係ありませんが、テキストサイズは変わらないようです。何か案は？

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

4

3 に答える 3

1

このクラスをターゲットにする必要があります.ui-btn-text

それで...

.footer-button .ui-btn-text {
    font-size: 20px;
}
于 2013-02-28T11:31:30.310 に答える
0

Chromeでソースを調べると、JQueryMobileがいくつかの介在クラスを追加していることがわかります。

長い話を短くするために：これはうまくいきます

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

}

于 2013-02-28T11:38:26.793 に答える
-1

次のように、フォントサイズに単位接尾辞（ "px"）を追加します。

.footer-button{
        min-height: 80px;
        font-size: 20px;
        word-wrap: normal;
    }
于 2013-02-28T11:28:39.750 に答える