JQuery設計一個工具欄

我正在使用Jquery在我的頁面頂部創建一個工具欄。JQuery設計一個工具欄

我目前正確地「格式化」了它。我使用的格式非常鬆散，因爲按鈕佈局正確，並且存在穿過我的頁面頂部的酒吧。

但是，按鈕不在工具欄內。我可以將按鈕格式化到他們的位置（左邊一個，右邊一個）的唯一方法是將按鈕左右浮動，然後將它們從工具欄中移出。

下面是在正確的位置的按鈕的代碼：

#toolbar 
{ 
     display: block; 
     padding: 2px; 
} 
.right 
{ 
     float: right; 
} 
.left 
{ 
     float: left; 
} 
</style> 
<title>Lobby</title> 

</head> 
<body> 
     <span id="toolbar" class="ui-widget-header ui-corner-all"> 
       <input id='button' class='left' type="submit" value="My Decks" onclick="window.location.href='listDecks.php'"/> 
       <input id='button' class='right' type='submit' name='log-out' value='Logout' onclick="window.location.href='logout.php'" /> 
     </span>

我本來它生產工具欄內的按鈕，但是在同一側（左側）：

#toolbar 
{ 
     display: block; 
     padding: 2px; 
} 
</style> 
<title>Lobby</title> 

</head> 
<body> 
     <div align="left"> 
     <span id="toolbar" class="ui-widget-header ui-corner-all"> 

       <input id='button' class='left' type="submit" value="My Decks" onclick="window.location.href='listDecks.php'"/> 
       <input id='button' class='right' type='submit' name='log-out' value='Logout' onclick="window.location.href='logout.php'" /> 
     </div> 
     </span>

我怎樣才能得到頁面的兩側和欄中的按鈕？

來源

2012-11-08 ZAX

@SoneshDabhi是的，我同意，但是沒有jquery-ui樣式的工具欄。我已經添加了一點，只是爲了改變它的外觀，但爲了真正看到什麼是錯誤的，你將不得不添加jquery ui - 應該有一個跨度的背景顏色等 – ZAX

@SoneshDabhi足夠真實。現在我明白你的觀點，它的工作原理。但是，這些按鈕不適合跨度。我試過在這個時候在左上角和右下角的工具欄上添加了填充，但是沒有什麼區別。這些按鈕將不適合進入工具欄，除非尺寸約爲50 px – ZAX

謝謝！現在明白了！ – ZAX

你沒有正確地結束你的span和div。在上面的代碼中.Span在div中，但是在span之前結束div。解決這個問題，看看它是否有幫助。

此外，我會使用比按鈕超鏈接像這樣的情況下。

<div align="left"> 
     <span id="toolbar" class="ui-widget-header ui-corner-all"> 

       <input id='button' class='left' type="submit" value="My Decks" onclick="window.location.href='listDecks.php'"/> 
       <input id='button' class='right' type='submit' name='log-out' value='Logout' onclick="window.location.href='logout.php'" /> 

     </span></div>

來源

2012-11-08 21:50:07

JQuery設計一個工具欄

回答

相關問題