jQuery 工具欄顯示標題

Question

我想使用 jQuery UI 創建一個帶有標題的工具欄。

到目前為止，我有：

HTML：

<div class="demo">

  <span id="toolbar" class="ui-widget-header ui-corner-all">
    <label>go to beginning</label>
    <button id="Submit">Submit</button>    
  </span>

</div>

CSS：

#toolbar {
    padding: 10px 4px;
    width: 500px
}

Javascript：

 $(function() {
    $( "#Submit" ).button({
    });
 });

關聯：

http://jsfiddle.net/CKvYv/59/

對於帶有標題的工具欄來說，它看起來真的很糟糕。 我想將其設置為 width: 100% 並修復要在工具欄內顯示的按鈕。

那可能嗎？

你必須提出一些更簡單、更漂亮的建議嗎？

謝謝

Answer 1

您遇到了所有 CSS 問題。 您應該使用 100% 寬度的 CSS 標記將工具欄設為 div 而不是 span。 按鈕大小通過 CSS 字體大小標記進行控制。

這是來自帶有 2 個按鈕的 jsfiddle 的代碼：

HTML

<div class="demo">

<div id="toolbar" class="ui-widget-header ui-corner-all">
    <label id="title">go to beginning</label>
    <button id="Submit">Submit</button>
    <button id="Submit2">Submit2</button>
</div>

CSS

#toolbar {
    width: 100%;
    padding-left : 4px;
}

#title {
    padding : 0px 4px; 
}

.ui-button {
    font-size : 11pt;
}

JavaScript

$(function() {
    $( "#Submit" ).button();
    $( "#Submit2" ).button();
});

Answer 2

工具欄應該是一個 DIV，#toolbar 的 CSS 應該有 100% 的寬度。 那將是一個開始。