Question

我正在创建一个这样的复选框：http://jsfiddle.net/3u7Xj/18/

试图让新的复选框显示在jpg的右边而不是下面，但无论出于什么原因我无法得到它。

<input type="checkbox" name="chkMain1" value="Main1" id="Main1" /><label for="Main1"><b>Main1</b></label>
<div id="holder">
    <a class="imgreport" href="images/pic.jpg"><img class="thumbnail" src="images/reports/thumb.png" alt=""/></a>
</div>

<input type="checkbox" name="chkMain2" value="Main2" id="Main2"><label for="Main2"><b> Main2</b></label>
<div id="holder">
        <a class="imgreport" href="images/pic.jpg"><img class="thumbnail" src="images/reports/thumb.png" alt=""/></a>
    </div>

<input type="checkbox" name="chkMain3" value="Main3" id="Main3"><label for="Main3"><b> Main3</b></label>
<div id="holder">
        <a class="imgreport" href="images/pic.jpg"><img class="thumbnail" src="images/reports/thumb.png" alt=""/></a>
    </div>

Answer 1

您可以像这样更改display属性：

.holder div {
  display:inline-block;
}

检查演示http://jsfiddle.net/3u7Xj/22/

或者只是不附加<div>元素，因为它们是block默认推送其他元素：

$(this).nextAll('.holder:first').append('<span>'+ctrl+lbl+'</span>');

另一个演示http://jsfiddle.net/3u7Xj/23/

css对齐动态创建的复选框

1 个答案: