タイトルを表示する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/

タイトルが付いたツールバーでは本当にうまく見えます。私はその幅を100％にして、ツールバーの中に表示されるボタンを修正したいと思います。

これは可能ですか？

あなたは何かをより簡単できれいに提案しなければなりませんか？

おかげ

Answer 1

すべてのCSSに問題があります。 CSSのマークアップが100％のスパンの代わりにツールバーをdivにする必要があります。ボタンのサイズは、CSSのフォントサイズのマークアップによって制御されます。

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

JavaScriptの

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; 
} 

：ここ

は2ボタンで、あなたのjsfiddleからのコードです

Answer 2

ツールバーには、DIVであるべきであり、#toolbarのためのCSSは、100％の幅を持っている必要があります。それはスタートになるだろう。