JQuery UI 工具栏按钮布局答案

【问题标题】：JQuery UI Toolbar Button LayoutJQuery UI 工具栏按钮布局
【发布时间】：2012-11-06 23:07:14
【问题描述】：

我正在使用 JqueryUI 的工具栏。

我目前在工具栏上有两个按钮。我想要一个按钮左对齐，一个按钮右对齐，而两者仍然在同一行。

目前我所能做的就是将两个按钮都放在左侧或右侧，或者将一个按钮放在左侧，然后将另一个按钮放在右侧但在下一行。

这是我的工具栏代码 sn-p：

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

如果您有任何建议让他们在同一行，我将不胜感激！

【问题讨论】：

标签： jquery html css jquery-ui toolbar

【解决方案1】：

我不太确定你想要什么，但我会这样做：

<input id='button'class="left" type="submit" />
<input id='button' class="right" type='submit'/>

并向按钮添加 CSS 类，以便您可以添加规则并浮动它们：

.left {float: left;}
.right {float: right;}

查看此直播example。

注意我不确定这是否适合你，因为我不知道你有什么 CSS 代码。

我能想到的另一个问题是检查“ui-widget”的 css 代码，因为它通常会导致问题。我个人使用 Chrome 的“检查元素”或 Mozilla 的 firebug，这些工具可以为您提供“实时”CSS 编辑以及良好的调试工具。

【讨论】：