div css中的边框没有正确显示答案

【问题标题】：Border is not coming properly in div cssdiv css中的边框没有正确显示
【发布时间】：2015-10-26 19:32:53
【问题描述】：

我正在尝试创建一个类似于输入系统的标签，但运行时遇到 css 问题。

我期望的是绿色应该有边界并将 2 个 div 包裹在其中，但事实并非如此。检查fiddle。

这是我创建标签的链接，如系统https://stackoverflow.com/a/10839632/639406

我的代码 -

<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 部分不是很好。

【问题讨论】：

标签： javascript html css

【解决方案1】：

您需要将display:inline-block; 添加到您的.master div 中，以使边框按您的意愿运行。

<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 允许发生这种情况。

【讨论】：

【解决方案2】：

你需要添加一个clearfix:

https://jsfiddle.net/aqh5ngq4/1/

.master::after {
  content: "";
  display: table;
  clear: both;
}

<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>

【讨论】：