我需要在一个宽度为100%的div中放置一个文本框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;
}
有一个例子 - > DEMO
您可以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;
}
京公网安备 11010802040832号 | 京ICP备19059560号-6 