Question

使用OSX 10.11.2，jquery.mobile-1.4.5.css＆＃34; JQM＆＃34;
下面的代码生成左侧的图像。但如果我注释掉JQM，我会得到右边的图像。两者都有一些我需要结合的不同功能：

将topBar上的左右图标浮动并调整大小。
固定顶部和底部栏，不要向上或向下滚动。
为图像2中的一些寄宿生设计风格。

如果我使用JQM，它会取消1和3的css，如果我将其注释掉或甚至将其放在body标签下，它会取消2和3.我想将JQM包含在我的webApp中以备将来使用稍后将转换为在webView中工作。

你能否提出修复建议？感谢

＆＃13;

.barTop, .barBottom {
   text-align: center;
   list-style-type: none;
   min-width: 320px;
   padding: 0;
   margin: 0;
}

.barTop li, .barBottom li {
   height: 2em;
   line-height: 2em;
   display: inline-block;
   margin: 0;
   background-color: #c8c7c9;
}
.menuIconLeft {
   float: left;
   width: 2em;
}

.menuIconRight {
   float: right;
   width: 2em;
}

.menuIconCenter {
   width: calc(100% - 5em);
}

.barBottom li {
   width: 32%
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>RRR</title>
      <link rel="stylesheet" href="css/jquery.mobile-1.4.5.css"/>
      <link rel="stylesheet" href="css/myStyle.css"/>
      <script src="js/jquery-1.11.3.js"></script>
      <script src="js/jquery.mobile-1.4.5.js"></script>
      <meta name="viewport" content="width=device-width"/>
   </head>
   <body>
      <section id="firstpage" data-role="page">
         <div class="header" data-role="header" data-position="fixed">
            <nav data-role="navbar">
               <ul class="barTop">
                  <li class="menuIconLeft">
                     <b>&#9776;</b>
                  </li>
                  <li class="menuIconCenter">
                     Activity label
                  </li>
                  <li class="menuIconRight">
                     <b>&#8942;</b>
                  </li>
               </ul>
            </nav>
         </div>
         <div class="ui-content">
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, temporibus, dolore! Doloribus, at repellendus sunt consectetur modi natus suscipit magni explicabo optio sequi, assumenda delectus perferendis excepturi nisi nobis ratione.Lorem ipsum
               dolor sit amet, consectetur adipisicing elit. Eos repellendus aliquam sint atque aliquid, tempore voluptatum recusandae et rerum, qui quasi ex at aspernatur. Temporibus voluptatum exercitationem sit modi assumenda!Lorem ipsum dolor sit amet, consectetur
               adipisicing elit. Laboriosam voluptatum illum maxime hic ipsa odio eaque cum. Optio cumque sequi recusandae. Nihil voluptatibus soluta ad saepe, quia optio laudantium molestiae.contents of this activity Lorem ipsum dolor sit amet, consectetur adipisicing
               elit. Asperiores nulla facere soluta tempore nihil, voluptatibus nostrum sequi, voluptate, incidunt distinctio reiciendis qui at totam alias. Culpa fuga rem vitae nesciunt?
            </p>
         </div>
         <div class="footer" data-role="footer" data-position="fixed">
            <nav data-role="navbar">
               <ul class="barBottom">
                  <li>
                     <b>NO</b>
                  </li>
                  <li>
                     <b>EXTRA</b>
                  </li>
                  <li>
                     <b>YES</b>
                  </li>
               </ul>
            </nav>
         </div>
      </section>
   </body>
</html>

＆＃13;

Answer 1

要解决此类问题，需要了解两个部分。首先，CSS优先考虑以后运行的任何内容 - 如果更改div背景颜色，然后稍后再更改，则后一个更改将适用。

其次，是！important标签。通过插入它，您可以强制某个方面覆盖可能适用于代码的任何其他内容，例如;

height: 2em !important;

运气好的话，你应该可以用它来解决你的问题。

my.css如何与jQueryMobile css一起工作

1 个答案: