自动在固定和相对位置之间转换?

时间:2018-11-04 12:16:39

标签: html css transition responsive

我正在研究一个包含搜索栏的项目,当您将鼠标悬停在其中任何一个上时,图标周围的小圆圈的背景都会放大以包围实际字段。

这是我的代码:

<div class='swhole'>
<div class='embtn'><div  id="searchproduct" style="font-size:calc(1vw + 1vh);cursor:pointer; display: inline;" onClick="searchProducts()">&#x1F50D;</div>

<input id="search" style=" color: white; position:absolute; top: calc(((2vw + 1vh)/2)-(1vw + 1vh); );  ; left: 3vw; display: inline; border-style: none; outline: none; background: transparent;  width: 25vw; font-size: calc(1vw + 1vh); " type="text" placeholder=" Search..." name="search" required>
</div>

</div>

这使用以下CSS:

.embtn {
    position:absolute;
    top:0vh ;
    left: 0vw;
    border-radius: 5vw;

    padding: 0.2vw;
    color: red; 
    width: calc(2vw + 1vh); 
    height: calc(2vw + 1vh);
    background-color: white;
    -webkit-transition: background-color 2s ease-out;
    -webkit-transition: width 0.5s ease-out;
    -o-transition: background-color 2s ease-out;
    -o-transition: width 0.5s ease-out;
    -moz-transition: background-color 2s ease-out;
    -moz-transition: width 0.5s ease-out;
    transition: background-color 2s ease-out;
    transition: width 0.5s ease-out;
}
.embtn:hover {

    background-color: black;
    -webkit-transition: background-color 2s ease-out;
    -webkit-transition: width 0.5s ease-out;
    -o-transition: background-color 2s ease-out;
    -o-transition: width 0.5s ease-out;
    -moz-transition: background-color 2s ease-out;
    -moz-transition: width 0.5s ease-out;
    transition: background-color 2s ease-out;
    transition: width 0.5s ease-out;
    width: 30vw;

}

这应该是所有内容都在同一行上,但是在背景返回到默认位置后我遇到了一个问题...搜索栏转到下一行。

以下是一些屏幕截图:

WorkingFailing

如您所见,换行有点把整个样式弄乱了:(

任何建议将不胜感激。

0 个答案:

没有答案