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 检查源代码，您会看到 JQuery Mobile 添加了一些干预类。

长话短说：这行得通

.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 回答