javascript - 在定义列表项旁边添加按钮

Question

我设置了以下定义列表:

<dl class="details">
    <dt>Name:</dt>
    <dd>John Doe</dd>
    <dt>Title:</dt>
    <dd>Engineer</dd>
 </dl>

这是带有 css 的 js fiddle :

http://jsfiddle.net/WCBBc/11/

现在我需要在 dt 旁边添加一个编辑和删除按钮，并留出一些额外的间距，因此它应该如下所示:

姓名:John Doe 编辑删除

磁贴:工程师编辑删除

如果不添加一些 hacky 类，我不确定该怎么做。

Answer 1

所以我更改了您的 dd 和 dt 规则的 css 以使其显示:inline-block 并删除 float 。然后我添加了一个按钮类，它也显示内联 block ，并在您那里的信息之后直接在 dd 上添加了按钮。

http://jsfiddle.net/LTvTE/

<dl class="details">
    <dt>Name:</dt>
    <dd>John Doe <button class="edit button">Edit</button></dd>
    <dt>Title:</dt>
    <dd>Engineer<button class="edit button">Edit</button></dd>
</dl>