在 div width: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

您可以在父标签上使用 padding 而不是在元素上使用 margin。

您需要将 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 添加一个填充。和 box-sizing:border-box;

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

然后删除输入的边距。

Answer 3

如果您仍想在 .search-text 中使用 width:100%，您可以使用 padding and/or 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

使用这个小修复：

* {box-sizing: border-box;}
删除相同元素上的 width 和 margin。
在 div 上使用 padding 而不是在 input 上使用 margin。

工作代码段

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

对于 .search-text 你可以使用

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

其中 22px = 8px（左边距）+ 8px（右边距）+ 6px（左边距）

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 的存在是为了覆盖过于具体的选择器 - 使用它不一定是坏事，但太容易使用它有点失败作为最后手段的目的 :).

在 div width:100% 内居中文本框，在所有边上留一些边距

Center a text box inside a div width:100% leaving some margin in all sides

html

css

textbox

width

centering