Question

我在jquery mobile（1.4.5）项目上工作。

我有这个html可折叠元素：

    <div data-role="collapsible" data-theme="b" data-content-theme="b">
        <h4>creaet new layers</h4>
        <fieldset id="newLayerArea" style="border: solid 1px #6b6b6b;">
            <legend>Layer</legend>
            <button id="btnSaveLayer" class="ui-btn ui-btn-inline ui-icon ui-btn-icon-left ui-btn-b" onclick="">save</button>
            <button id="btnCancelLayer" class="ui-btn ui-btn-inline ui-icon-delete ui-btn-icon-left" onclick="">delet</button>
        </fieldset>
    </div>

以下是它的外观：

我需要移动＆＃34; creaet新层＆＃34;右边的标题。而图标需要保持其原始位置。

这是DEMO !!!

如何移动标题＆＃34;创建新图层＆＃34;在右边？

Answer 1

这与jquery无关：

您需要使用以下css

fieldset#newLayerArea legend{
  text-align: right;
}

代码：

    <div data-role="collapsible" data-theme="b" data-content-theme="b">
    <h4>creaet new layers</h4>
    <fieldset id="newLayerArea" style="border: solid 1px #6b6b6b;">
        <legend style="text-align:right">Layer</legend>
        <button id="btnSaveLayer" class="ui-btn ui-btn-inline ui-icon ui-btn-icon-left ui-btn-b" onclick="">save</button>
        <button id="btnCancelLayer" class="ui-btn ui-btn-inline ui-icon-delete ui-btn-icon-left" onclick="">delet</button>
    </fieldset>
</div>

Answer 2

正如您在问题中所说，JQM 1.4.5需要这个 - 这就是：

＆＃13;

.ui-collapsible-heading-toggle.ui-btn {
  text-align: right !important;
}

＆＃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.min.js"></script>
</head>

<body>
  <div data-role="page" id="page-one">
    <div data-role="content">
      <div data-role="collapsible">
        <h4>creaet new layers</h4>
        <fieldset id="newLayerArea" style="border: solid 1px #6b6b6b;">
          <legend>Layer</legend>
          <button id="btnSaveLayer" class="ui-btn ui-btn-inline ui-icon ui-btn-icon-left ui-btn-b" onclick="">שמירה</button>
          <button id="btnCancelLayer" class="ui-btn ui-btn-inline ui-icon-delete ui-btn-icon-left" onclick="">ביטול</button>
        </fieldset>
      </div>

    </div>
  </div>
</body>

</html>

＆＃13;

但请注意，在您的小提琴中，您引用的是较旧的JQM版本。

.ui-collapsible-heading>a>span {
  text-align: right !important;
}

如何在可折叠元素jquery mobile中将标题移动到右侧？

2 个答案: