Question

我设置了以下定义列表：

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

这是js小提琴，它有css：

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

现在我需要在dt旁边添加一个带有一些额外间距的编辑和删除按钮，所以看起来应该是这样的：

姓名：John Doe编辑删除

平铺：工程师编辑删除

如果不添加一些hacky类，我不知道怎么办。

Answer 1

追加他们

$('.details dd').each(function() {//for each dd
    $(this).append('<button>edit</button><button>delete</button>');//add buttons
});

做了一个小提琴：http://jsfiddle.net/filever10/X6pyK/

Answer 2

所以我更改了你的dd和dt规则的css以使其显示：inline-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>

Answer 3

首先，链接不适用于此类事情：Look Here

使用按钮代替。那说：

<dl class="details">
<dt>Name:</dt>
<dd>John Doe&nbsp&nbsp&nbsp<a href='edit'>edit</a>&nbsp&nbsp&nbsp<a href='delete'>delete</a></dd>
<dt>Title:</dt>
<dd>Engineer&nbsp&nbsp&nbsp<a href='edit'>edit</a>&nbsp&nbsp&nbsp<a href='delete'>delete</a></dd>

Answer 4

在标记中添加按钮没有任何问题。

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

然后：

button {float:right}

添加定义列表项旁边的按钮

4 个答案: