jQuery工具欄顯示標題

我想創建一個工具欄與標題中使用jQuery UI。jQuery工具欄顯示標題

到現在爲止，我有：

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％，並修復按鈕顯示在工具欄內。

這可能嗎？

您是否需要提出一些更簡單，更漂亮的建議？

由於

來源

2011-07-10 glarkou

你有所有的CSS問題。您應該使工具欄成爲div而不是跨度爲100％寬度的CSS標記。按鈕大小通過CSS字體大小標記進行控制。

這裏是你的jsfiddle代碼與2按鈕：

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

來源

2011-07-10 14:33:40 jyore

非常感謝。 http://jsfiddle.net/CKvYv/94/你可以將這些按鈕對齊而不更改行嗎？ – glarkou

感謝隊友。我找到了解決方案.. – glarkou

@ntenisOT沒問題。很高興你得到它。 – jyore

工具欄應該是一個DIV，以及用於#toolbar的CSS應具有100％的寬度。那將是一個開始。

來源

2011-07-10 13:47:27

jQuery工具欄顯示標題

回答

相關問題