需要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>位於類".list-item"的div的右端，但是無論我做什么，它都停留在{{ innerdiv.text }}之后。

Answer 1

為此，您可以使用float: right; 。 這里有一些關於花車的知識 。

HTML：

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

</div>

CSS：

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

此處演示