我需要在一个宽度为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;
}Run Code Online (Sandbox Code Playgroud)
<div id="search-cont" class="search-cont">
<div><input type="text" id="search-text" class="search-text" placeholder="Search" /></div>
</div>Run Code Online (Sandbox Code Playgroud)
有一个例子 - > …
我有这个页面http://myrender.altervista.org/show2.html
我用float:right指令将5个按钮移动到右上角,然后悬停在这些按钮中突然停止工作(在float:right它工作之前).
有HTML:
<div class="container">
<div class="imgcontainer">
<div class="latest">Ultimi Caricamenti</div>
<img class="imgslide" src="" />
</div>
<div class="buttondiv">
<div class="button" onclick="change(0); clearInterval(t);" id="p0"></div>
<div class="button" onclick="change(1); clearInterval(t);" id="p1"></div>
<div class="button" onclick="change(2); clearInterval(t);" id="p2"></div>
<div class="button" onclick="change(3); clearInterval(t);" id="p3"></div>
<div class="button" onclick="change(4); clearInterval(t);" id="p4"></div>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
还有CSS类(只需要):
.button
{
display:inline-block;
height:10px;
width:10px;
background:#eee;
border-radius:50%;
cursor: pointer;
opacity: 0.6;
}
.button:hover
{
opacity:1.0;
}
.buttondiv
{
margin-top: -17px;
padding-right: 5px;
float:right;
}
.buttonactive
{
background:#1390cd;
opacity:0.8;
}
.container …Run Code Online (Sandbox Code Playgroud)