在div寬度內居中放置一個文本框：100％在所有面都留下一定的邊距

Question

我需要在div的100％寬度內放置一個文本框，並在所有邊上都留下margin。
我的問題是，我無法把右邊距，導致文本框的100％寬度（這是必要的！）。
因此，textbox和div容器必須具有100％的寬度（導致響應），而textbox需要8px的邊距。

.search-cont { 
 
    background-color: #c8c7cc; 
 
    width:100%; 
 
    height:44px; 
 
    overflow:hidden; 
 
    transition: all 0.5s; 
 
    z-index:997; 
 
    position:fixed; 
 
} 
 

 
.search-text { 
 
    border-radius:5px; 
 
    border:0px; 
 
    height:28px; 
 
    padding:0px; 
 
    padding-left:6px; 
 
    width: 100% !important; 
 
    margin: 8px !important; 
 
    box-sizing:border-box; 
 
    display:block; 
 
    background-color:#fff; 
 
} 
 

 
::-webkit-input-placeholder { 
 
    text-align: center; 
 
} 
 

 
:-moz-placeholder { /* Firefox 18- */ 
 
    text-align: center; 
 
} 
 

 
::-moz-placeholder { /* Firefox 19+ */ 
 
    text-align: center; 
 
} 
 

 
:-ms-input-placeholder { 
 
    text-align: center; 
 
}

<div id="search-cont" class="search-cont"> 
 
    <div><input type="text" id="search-text" class="search-text" placeholder="Search" /></div> 
 
</div>

還有就是例子 - >DEMO

Answer 1

您可以在父標籤，而不是margin元素上使用padding。

您需要將box-sizing:border-box;添加到父級（最佳做法是將此添加到使用*選擇器的任何元素）。

* { 
 
    box-sizing:border-box; 
 
} 
 

 
body { 
 
    margin:0; 
 
} 
 

 
.search-cont { 
 
    background-color: #c8c7cc; 
 
    width:100%; 
 
    height:44px; 
 
    overflow:hidden; 
 
    transition: all 0.5s; 
 
    z-index:997; 
 
    position:fixed; 
 
    padding:8px; 
 
} 
 

 
.search-text { 
 
    border-radius:5px; 
 
    border:0px; 
 
    height:28px; 
 
    padding:0px; 
 
    padding-left:6px; 
 
    width: 100% !important; 
 
    /*margin: 8px !important;*/ 
 
    box-sizing:border-box; 
 
    display:block; 
 
    background-color:#fff; 
 
} 
 

 
::-webkit-input-placeholder { 
 
    text-align: center; 
 
} 
 

 
:-moz-placeholder { /* Firefox 18- */ 
 
    text-align: center; 
 
} 
 

 
::-moz-placeholder { /* Firefox 19+ */ 
 
    text-align: center; 
 
} 
 

 
:-ms-input-placeholder { 
 
    text-align: center; 
 
}

<div id="search-cont" class="search-cont"> 
 
    <div><input type="text" id="search-text" class="search-text" placeholder="Search" /></div> 
 
</div>

Answer 2

只需添加填充到div。和框大小：邊框;

padding: 8px; 
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box; 

刪除輸入的邊距。

Answer 3

，如果你仍然想使用width:100%在.search-text你可以做一個小黑客與任何padding和/或border類似如下：

.search-text { 
    border-radius:5px; 
    border:0px; 
    height:28px; 
    padding:0px; 
    padding-left:6px; 
    width: 100% !important; 
    border: 8px solid transparent !important; /* use border as margin */ 
    box-sizing:border-box; 
    display:block; 
    background-color:#fff; 
} 

Answer 4

使用這個小修復：

1. * {box-sizing: border-box;}
2. 刪除相同元素上的width和margin。
3. 使用padding代替div代替代替input。

工作摘錄

* { 
 
    box-sizing: border-box; 
 
} 
 
.search-cont { 
 
    background-color: #c8c7cc; 
 
    height: 44px; 
 
    overflow: hidden; 
 
    transition: all 0.5s; 
 
    z-index: 997; 
 
    position: fixed; 
 
    left: 10px; 
 
    right: 10px; 
 
} 
 

 
.search-cont div { 
 
    padding: 8px; 
 
} 
 
.search-text { 
 
    border-radius: 5px; 
 
    border: 0px; 
 
    height: 28px; 
 
    padding: 0px; 
 
    text-indent: 6px; 
 
    width: 100% !important; 
 
    box-sizing: border-box; 
 
    display: block; 
 
    background-color: #fff; 
 
} 
 
::-webkit-input-placeholder { 
 
    text-align: center; 
 
} 
 
:-moz-placeholder { 
 
    /* Firefox 18- */ 
 
    text-align: center; 
 
} 
 
::-moz-placeholder { 
 
    /* Firefox 19+ */ 
 
    text-align: center; 
 
} 
 
:-ms-input-placeholder { 
 
    text-align: center; 
 
}

<div id="search-cont" class="search-cont"> 
 
    <div> 
 
    <input type="text" id="search-text" class="search-text" placeholder="Search" /> 
 
    </div> 
 
</div>

Answer 5

的。搜索文本可以使用

width: calc(100% - 22px) !important; 

其中的22px = 8像素（保證金左）+ 8像素（保證金右）+ 6像素（填充左）

Answer 6

您可以使用box-sizing來達到預期的效果（也 - 在body標籤具有默認margin: 8px）

Fiddle using box-sizing

/*resetting body margin*/ 
body { 
    margin: 0; 
} 

.search-cont { 
    box-sizing: border-box; 
    padding: 8px; 
    /*...snipped...*/ 
} 

.search-text { 
    margin: 8px; /*REMOVE THIS LINE*/ 
    /*...snipped...*/ 
} 

使用框大小不過就像是用廣告不同的盒子模型（它是）。

作爲一種替代方法，您可以使用calc實現相同的效果，但您可以控制計算。

Fiddle using calc

.search-text { 
    width: calc(100% - 16px); /*margin on both sides*/ 
    /*...snipped...*/ 
} 

而且在另一方面，你不需要任何!important那裏，!important存在覆蓋過於具體選擇 - 使用它不一定是壞事，但太容易使用它有點違背了它的目的作爲最後的手段 :)。