需要CSS定位帮助

Question

我想在列表中进行下拉菜单，我正在使用插入符号，div看起来像这样

<div class="class-to-div1" id="{{ div.id }}" data-cardsnum="{{ div.num }}">
                    <div class="col-md-2 list">
                        <button onclick="text(this)" class="add-div btn btn-success btn-sm">add div</button>
                        <button class="delete-div btn btn-danger btn-sm">delete div</button>
                        <div class="class-to-div">
                            {% for innerdiv in div.innerdivs %}
                                <div class="list-item" data-column="{{ innerdiv.sveti_id }}" data-position="{{ innerdiv.position }}" id="{{ innerdiv.pk }}"> {{  innerdiv.text}} <span class="caret mycaret mydropdown"></span></div>
                            {% endfor %}
                        </div>
                    </div>
                </div>

我希望这个<span>位于div的右端，类".list-item"，但无论我做什么，它都会停留在{{ innerdiv.text }}之后。

Answer 1

为此你可以使用float: right;。关于floats的一点点。

HTML：

<div>
    Testing Testing 
<span>Test</span>

</div>

CSS：

div {
    width: 80%;
    height: 40px;
    border: 1px solid;
}
span {
    float: right;
}

DEMO HERE