如何將標題移動到可摺疊元素jquery mobile的右側？

我在我的jquery mobile（1.4.5）項目上工作。如何將標題移動到可摺疊元素jquery mobile的右側？

我有這樣的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>

這裏它的外觀：

我需要移動「creaet新圖層」稱號的權利。而圖標需要保持原來的位置。

這是DEMO !!!

如何將標題「創意新圖層」移動到右側？

來源

2017-07-19 Michael

此無關的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>

來源

2017-07-19 07:24:07

我可以把它作爲樣式在HTML元素？ – Michael

，你需要這個對於JQM 1.4.5 - 這是它：

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

<!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>

但請注意，在您的小提琴中，您引用的是較舊的JQM版本。

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

來源

2017-08-07 12:37:13 deblocker

如何將標題移動到可摺疊元素jquery mobile的右側？

回答

相關問題