如何在Datebox輸入字段的同一行上獲取標籤？

這是尷尬。我正在使用Datebox模塊，我試圖在輸入旁邊對齊標籤，就像提供的鏈接中的示例一樣。如何在Datebox輸入字段的同一行上獲取標籤？

我期待沿此線的東西： enter image description here

但得到這樣的： enter image description here

這是我的HTML：

<div name="activities" id="activities"> 
     <label for="activity-1">Activity 1</label> 
     <input name="activity-1" id="activity-1" type="date" data-role="datebox" data-options='{"mode": "durationflipbox", "overrideDurationOrder": ["h","i"], "overrideDurationFormat": "%Dl:%DM"}'/> 
</div>

我試過設置樣式在CSS中

#activities { 
    display: inline-block; 
    vertical-align: right; 
}

但我沒有得到上面給出的預期結果。

我在做什麼錯？

UPDATE 看來，這樣最後的結果看起來是這樣被加載頁面時插入HTML： enter image description here

我插入的圖像，而不是代碼道歉，但我似乎無法複製HTML以清晰的方式呈現。

無論如何，這如果你想複製/粘貼：

<div name="activities" id="activities"> 
     <label for="activity-1" class="ui-input-text" style="vertical-align: middle;">Activity 1</label> 
     <div class="ui-input-text ui-shadow-inset ui-corner-all ui-btn-shadow ui-body-c"><div class="ui-input-datebox ui-corner-all ui-body-c" style="border: none;"><input name="activity-1" id="activity-1" type="text" data-role="datebox" data-options="{&quot;mode&quot;: &quot;durationflipbox&quot;, &quot;overrideDurationOrder&quot;: [&quot;h&quot;,&quot;i&quot;], &quot;overrideDurationFormat&quot;: &quot;%Dl:%DM&quot;}" class="ui-input-text ui-body-c" readonly="readonly"><a href="#" class="ui-input-clear ui-btn ui-btn-up-c ui-shadow ui-btn-corner-all ui-btn-icon-notext" title="Open Date Picker" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-icon="grid" data-iconpos="notext" data-theme="c" style="vertical-align: middle; display: inline-block;"><span class="ui-btn-inner"><span class="ui-btn-text">Open Date Picker</span><span class="ui-icon ui-icon-grid ui-icon-shadow">&nbsp;</span></span></a></div></div> 
    </div>

來源

2013-05-04 MdaG

該標籤在Chrome上以內聯方式顯示。查看jsFiddle http://jsfiddle.net/Ua4Gs/。 – Aiias 2013-05-04 18:03:48

是的，你是對的。我也在Chrome上，但得到不同的結果。似乎屬於該模塊的源JavaScript文件在頁面加載時插入HTML。我會更新我的問題。 – MdaG 2013-05-04 18:08:36

你可以用你正在使用的所有外部資源創建一個小提琴嗎？（插件文件...） – Arbel 2013-05-04 18:10:18

我已經意識到這是因爲jQuery Mobile的CSS。

來源

2013-06-03 19:11:54 MdaG

你的代碼工作對我來說：http://jsfiddle.net/Lera/HEeHd/ 是什麼瀏覽器您使用？

我也可以在沒有CSS的情況下得到相同的結果。只要您的HTML：

<div name="activities" id="activities"> 
     <label for="activity-1">Activity 1</label> 
     <input name="activity-1" id="activity-1" type="date" data-role="datebox" data-options='{"mode": "durationflipbox", "overrideDurationOrder": ["h","i"],  "overrideDurationFormat": "%Dl:%DM"}'/> 
</div>

來源

2013-05-04 18:07:02 Leraa

嘗試設置一些樣式到標籤是這樣的：

#activities label { 
    position: absolute; 
    top: 16px; 
    left: 10px; 
    z-index: 1; 
}

Fiddle

來源

2013-05-04 18:20:10 Eli

這可能會起作用，但我必須考慮到div上面的HTML，我沒有在這裏顯示它以儘可能簡單。我也不會因絕對職位而陷入困境嗎？它假設在Chrome和Safari上工作。移動和桌面。 – MdaG 2013-05-04 18:25:35

如何在Datebox輸入字段的同一行上獲取標籤？

回答

相關問題