Question

我正在尝试指定位于JQuery Mobile应用程序页面（图1）页脚中的按钮文本的大小。该类名为“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>

Answer 1

您需要定位此类.ui-btn-text

因此...

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

Answer 2

如果您使用Chrome检查来源，您会看到JQuery Mobile添加了一些干预类。

简而言之：这是有效的

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

}

Answer 3

将单位后缀（“px”）添加到字体大小，如下所示：

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

CSS中的字体大小无法正常工作

3 个答案: