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% 的宽度。 那将是一个开始。