边境在div css中不正确

Question

我正在尝试创建一个像输入系统的标签,但在css的问题上运行.

我期待的是绿色应该边界并包裹其中的2个div但不是.检查小提琴.

这是我要创建标签的链接,如系统/sf/answers/758774271/

我的代码 -

<div class="master" style="border: 1px solid #3ef001; width: 200px;">
    <div class="tagCont" style="float: left;">
        <span>HTML</span>
        <span>CSS</span>
        <span>PHP</span>
    </div>

    <div class="inputElem" style="float: right;">
        <input type="text" />
    </div>
</div>

除了一个解决方案,我正在寻找我错误的概念,因为我不是很好的CSS部分.

Answer 1

你将要添加display:inline-block;到.masterdiv中,以便边框能够按照你想要的方式运行.

<div class="master" style="border: 1px solid #3ef001; width: 200px; display:inline-block;">
    <div class="tagCont" style="float: left;">
        <span>HTML</span>
        <span>CSS</span>
        <span>PHP</span>
    </div>

    <div class="inputElem" style="float: right;">
        <input type="text" />
    </div>
</div>

https://jsfiddle.net/m3shyss6/

就概念而言,您遇到了问题,因为div没有考虑其内容的大小.更改其显示属性以inline-block允许这种情况发生.