Question

我正在尝试创建一个像输入系统这样的标签，但在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部分不是很好。

Answer 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可以实现此目的。

Answer 2

您需要添加clearfix：

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

＆＃13;

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

＆＃13;

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

＆＃13;

边境在div css中不正确

2 个答案: