小编Hig*_*709的帖子

将div宽度内的文本框居中:100%在所有边留下一些边距

我需要在一个宽度为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)

有一个例子 - > …

html css textbox width centering

3
推荐指数
1
解决办法
1159
查看次数

浮动的奇怪行为:右和css悬停

我有这个页面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)

html css hover css-float

0
推荐指数
1
解决办法
1771
查看次数

标签 统计

css ×2

html ×2

centering ×1

css-float ×1

hover ×1

textbox ×1

width ×1