在 JQUERY Mobile 上应用 CSS答案

【问题标题】：Applying CSS on JQUERY Mobile在 JQUERY Mobile 上应用 CSS
【发布时间】：2016-12-20 06:54:25
【问题描述】：

我是 JQuery 移动版的新手。我发现很难将一些 CSS 应用于我的 JQUERY 移动脚本。

我需要做以下事情：

列表项
改变页面颜色
更改导航栏按钮颜色
将导航栏按钮的高度更改为 48 像素
在导航栏按钮中间对齐文本
调整导航栏图标大小

然后关于列表视图：

将列表高度更改为 48 像素
更改列表颜色
将列表字体大小更改为 16 像素

请帮忙解决这个问题！

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/spinbox/latest/jqm-spinbox.min.js"></script>
</head>
<body>
<style>
  h2 {
    text-align: center;
}
p {
    text-align: center;
}
.navTxtSize {
    font-size: 16px;
    height: 48px;
    text-align: middle;
}
.liListItem {
    height: 48px;
}
#hea .ui-btn {
    height: 48px;
}
</style>
<div data-role="page" id="pageone">
  <div data-role="header" data-position="fixed">
    <div>
      <h2>CSS</h2>
    </div>
    <div data-role="navbar" data-iconpos="top" id="hea" class="ui-body-c">
      <ul>
        <li> <a href="#inputDialog" data-icon="plus">
          <div class="navTxtSize">Add Item</div>
          </a></li>
        <li><a onclick="checkList()" data-icon="delete">
          <div  class="navTxtSize">Delete ALL</div>
          </a></li>
        <li><a onclick="loadItemsForList1()" data-icon="shop" >
          <div  class = "navTxtSize">Shop</div>
          </a></li>
      </ul>
    </div>
  </div>
  <div data-role="main" class="ui-content">
    <form class="ui-filterable">
      <input id="myFilter" placeholder="Enter Item Name" data-type="search">
    </form>
    <ul data-role="listview" data-filter="true" data-input="#myFilter" data-autodividers="true" data-inset="true" id = "itemsList" data-split-icon="delete">
      <li class=liListItem"><a class="listItem">Example1</a><a class="removal"></a></li>
      <li class=liListItem"><a class="listItem">Example2</a><a class="removal"></a></li>
      <li class=liListItem"><a class="listItem">Example3</a><a class="removal"></a></li>
    </ul>
  </div>
</div>
</body>
</html>

【问题讨论】：

您可以在 JSFiddle 中或内部重新创建它吗？
这里是：jsfiddle.net/11vjkrou/1
你想改变什么？有哪些颜色？哪些元素？我看到导航列表项已经是 48 像素，字体大小是 16 像素，我弄错了吗？
但是这些都不起作用。我还需要添加我在问题中列出的更多 css。
但是这些都不起作用。我还需要添加更多的 CSS，正如我在问题中列出的那样。是的。我设法更改导航栏大小和字体大小。我需要重新调整图标的大小并向下移动导航栏按钮中的所有文本。关于列表
我希望更改高度。如何做到这一点？

【解决方案1】：

这些是您需要的相关选择器：

导航栏：

.ui-navbar li .ui-btn {
  background-color: blanchedalmond !important;
}

列表视图：

.ui-listview li > .ui-btn {
  background-color: aliceblue;
  height: 48px;
}

图标：

.ui-btn::after {
    background-size: 32px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 1.5em;
    background-color: darksalmon;
}

但还有一些工作要做，调整图标的边距和边框半径。

你可以以此为起点来玩，因为你还没有明确指定你的图标应该有多大。

由于图标大小增加，列表视图右侧的按钮也需要一些自定义样式：

.ui-listview>li.ui-li-has-alt>.ui-btn+.ui-btn {
  width: 68px;
}

.ui-btn-icon-notext:after, .ui-btn-icon-left:after, .ui-btn-icon-right:after {
  margin-left: -16px;
}

我删除了你所有的 CSS 类以显示一个干净的结果，这里只覆盖了 JQM 样式：https://jsfiddle.net/a3ckna8w/4/

请注意，jQuery Mobile 可能会覆盖您的 CSS 样式，因此您应该将您的样式标记为 !important。有关发生这种情况的解释，请参见此处：Html5 - Css styles are overriden by jquery mobile style。

【讨论】：