jquery - Jquery 对话框布局

Question

我有一个由按钮触发的简单 jquery UI 对话框。

function OpenGeneratePINsDialog() {
$("#generatePinsDialog").dialog('open');

}

我想要的是在标签旁边显示数字。现在它不在块内显示。

<div id="generateDialog" title="Generate New">
<label style="display:inline-block; width:200px;">The number generated: </label><div id="numberGenerated">1</div>
<br />
<label style="display:inline-block; width:200px;">ID+PIN</label><div id="combinationIDPIN">2</div>
<br />
<label style="display:inline-block; width:200px;">Same as ID</label><div id="SameWithID">3</div>

图片：

Answer 1

对数字使用内联元素，例如“span”。

<span id="numberGenerated">1</span>

Answer 2

如果你想使用 div，div 默认设置为display:block;

将其设置为 inline-block 就可以了。

<div id="numberGenerated" style="display:inline-block;">1</div>

Answer 3

HTML：

<div id="generateDialog" title="Generate New" class="mystyle">
<label>The number generated: </label><div id="numberGenerated">1</div>
<br />
<label>ID+PIN</label><div id="combinationIDPIN">2</div>
<br />
<label>Same as ID</label><div id="SameWithID">3</div>

CSS：

.mystyle label, .mystyle div {
  display:inline-block;
}

.mystyle label {
  width:200px; /* or whatever size you want them */
}