javascript - 在没有JS的情况下在内联和固定之间自动传输？

我试图编写一个时髦的CSS搜索框，该框的背景带有我的放大镜图标，将其包围在搜索栏中。但是，我遇到了一些问题，因为搜索栏在未封装时会切换到下一行。这是我的代码：

function searchProducts() {
    	document.getElementById("searchbar").submit();

    }

.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 ;
        -webkit-transition: width 0.5s ease-out;
        -o-transition: background-color 2s ;
        -o-transition: width 0.5s ease-out;
        -moz-transition: background-color 2s ;
        -moz-transition: width 0.5s ease-out;
        transition: background 2s, width 0.5s ease-out 0.5s;
    }
    .embtn:hover {


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

    }

<form id="searchbar" style=" position:absolute; top:5vh ;left: 2vw; " method="post" action="index.php">
    <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>


    </form>

直到背景缩小到其正常大小，然后搜索栏转到下一行为止，这是可以的。

我对此也有一个摆弄：JSFIDDLE

关于如何将所有内容保持一致的任何想法？我有它较早的工作，但现在不工作。

:)

最佳答案

我发现的唯一问题是您计算输入的偏移高度的方式。 calc(((2vw + 1vh)/2)-(1vw + 1vh));将输入框推到图标下方。 top: 1vh使它相对内联。

还重新格式化了代码，使其更易于阅读。

.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 ;
    -webkit-transition: width 0.5s ease-out;
    -o-transition: background-color 2s ;
    -o-transition: width 0.5s ease-out;
    -moz-transition: background-color 2s ;
    -moz-transition: width 0.5s ease-out;
    transition: background 2s, width 0.5s ease-out;
}
.embtn:hover {
    -webkit-transition: background-color 2s ;
    -webkit-transition: width 0.5s ease-out;
    -o-transition: background-color 2s ;
    -o-transition: width 0.5s ease-out;
    -moz-transition: background-color 2s ;
    -moz-transition: width 0.5s ease-out;
    transition: background 2s, width 0.5s ease-out;
	background-color: black;
    width: 30vw;
}

.form {
   position:absolute;
   top:5vh;
   left: 2vw;
}

.input-icon {
  font-size:calc(1vw + 1vh);
  cursor:pointer;
  display: inline;
}

.input {
  color: white;
  position: absolute;
  top: 1vh;
  left: 3vw;
  display: table-cell;
  border-style: none;
  outline: none;
  background: transparent;
  width: 25vw;
  font-size: calc(1vw + 1vh);
}

<form id="searchbar" class='form' method="post" action="index.php">
  <div class='swhole'>
    <div class='embtn'>
      <div id="searchproduct" class='input-icon' onClick="searchProducts()">&#x1F50D;</div>

      <input id="search" class='input' type="text" placeholder=" Search..." name="search" required>
    </div>
  </div>
</form>


<script>
function searchProducts() {
	document.getElementById("searchbar").submit();

}
</script>