邊框不能正確地在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

回答

相關問題