jquery 模态对话框按钮 div 未右对齐 - css 使其占据总行

Question

我是样式表新手，需要以下方面的帮助。我的 JSP 代码使用模态对话框示例，类似于 https://jqueryui.com/dialog/#modal-form 中的演示我使用相同的 CSS 和 JS，来自本网站的 jquery 库。我有一个要求，在 DIV 中，我必须在 'Add'(leftdiv) 的右侧有一个按钮，在右侧有一个分页 (rightdiv)。该按钮将从上面的开源中打开一个模式对话框并使用其 CSS。右侧对齐使用我的 CSS 并且工作正常，但是应该向左对齐的模态按钮向右对齐。当我在 chrome 中检查时，父 div 在 2 个不同的行中显示 2 DIV。第一行包含左 div 和第二行 rightDiv.

<div><div class="LeftAlign">
<button id="create-user">Add</button>
</div>
<div class="RightAlign">Pagination</div>
</div>

当我检查按钮时，这个 class = "ui-button ui-corner-all ui-widget"。我应该如何在代码中解释这一点。我如何更改我的 CSS 以使按钮 moveleft 和分页在一行中右对齐。提前致谢。

Answer 1

给予display:flex； parent div 的样式，例如：-

.first {display:flex;}
.RightAlign { margin-left: auto;}

所以 HTML 将是：-

<div class="first">
  <div class="LeftAlign">
    <button id="create-user">Add</button>
  </div>
  <div class="RightAlign">Pagination</div>
</div>

jquery 模态对话框按钮 div 未右对齐 - css 使其占据总行

jquery modal dialog button div not aligning right - css makes it occupy total row

css

jquery

modal-dialog