Question

基于SO Q&A我尝试过：

            <div data-role="collapsible" data-theme="b" data-corners="true"  data-inset="false" data-content-theme="c" ><h1>Family & Identity<img src="Images/audio-icon.png" border="0" style="position: relative; left: 25px;" alt="With Audio"><span style="float: right;">179</span></h1>
              <ul data-role="listview" data-inset="true" >
                <li><a href="#Main"  data-parm="Family & Identity">Family Members<span class="ui-icon-audio-icon ui-btn-icon-notext inlineIcon"></span></a></span><span class="ui-li-count">53</span></li>
                <li><a href="#Main" ...</li>
                .
                .
                .
              </ul>
            </div>

CSS是：

   .ui-icon-audio-icon:after {
        background-image: url('Images/audio-icon.png');
        background-color: transparent;
    }
    .inlineIcon {
      display: inline-block;
      position: relative;
      vertical-align: middle;
      margin-left: 6px;
    }

这应该是这样的：

提前感谢

Answer 1

交换图标和文字：

＆＃13;

.ui-icon-myicon:after {
  left: auto !important;
  margin-left: 16px !important;
  background-color: transparent !important;
}

.inlineIcon {
  display: inline-block;
  vertical-align: middle;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>

<body>
  <div data-role="page" id="main">
    <div role="main" class="ui-content">
      <div data-role="collapsible" data-theme="b" data-corners="true" data-inset="false" data-content-theme="c">
        <h1 style="vertical-align: middle;">Family & Identity<span class="ui-icon-audio ui-icon-myicon ui-btn-icon-notext inlineIcon"></span><span  class="ui-li-count">179</span></h1>
        <ul data-role="listview" data-inset="true">
          <li>
            <a href="#">Text in list item 1<span class="ui-alt-icon ui-icon-audio ui-icon-myicon ui-btn-icon-notext inlineIcon"></span><span class="ui-li-count">53</span></a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</body>

</html>

＆＃13;

在<ul>中为<li>添加一个额外的图标

1 个答案: