Javascript CSS中的字体大小不起作用_Javascript_Jquery_Css

Javascript CSS中的字体大小不起作用

javascript jquery css

Javascript CSS中的字体大小不起作用,javascript,jquery,css,Javascript,Jquery,Css,我试图指定位于JQuery移动应用程序页面页脚的按钮文本的大小（图表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=

我试图指定位于JQuery移动应用程序页面页脚的按钮文本的大小（图表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>


.ui页面{背景：#2f2d2d；}
.页脚栏{
最小高度：80px；
}
.页脚按钮{
最小高度：80px；
字号:20 ;；
换字：正常；
}
数据采集器

收集的可用数据：





© KLH
车祸

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

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

您需要以此类为目标。ui btn文本

所以

如果您使用Chrome检查源代码，您将看到JQuery Mobile添加了一些中间类

长话短说：这是有效的

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

}

我认为您需要添加一种字体大小-

px

，

pt

，

em

，

JQM正在覆盖您的样式。删除jqm css include并查看它是否仍然有效。-1阅读问题

我指定的值（px、em或pt）与否无关

重复回答是重复的。您还将

min height

和

word wrap

属性应用于

ui btn text

。这将产生不同的输出。

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