边框不能正确地在div css

我试图创建一个像输入系统一样的标签，但运行在与CSS的问题。边框不能正确地在div 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部分不太擅长。

来源

2015-10-26 Tech Solvr

你会希望添加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可以实现此目的。

来源

2015-10-26 19:35:28

您需要添加一个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>

来源

2015-10-26 19:34:59 dave

边框不能正确地在div css

回答

相关问题