Question

我正在尝试编写一个时髦的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

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

：）

Answer 1

我发现的唯一问题是您计算输入的偏移高度的方式。 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>

Answer 2

在对.embtn样式应用宽度时，您犯了一个错误。您正在设置宽度width: calc(2vw + 1vh);，而应该设置为width: calc(2vw + 1vw);

我对内联样式表进行了一些更改以使其完美。下面是那些。

对于searchproduct div： position:absolute; top:2px;

对于搜索输入： top: 2px;

请参见下面的代码段

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

.embtn {
        position:absolute;
        top:0vh ;
        left: 0vw;
        border-radius: 5vw;
    
        padding: 0.2vw;
        color: red; 
        width: calc(2vw + 1vw); 
        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="position:absolute; top:2px; font-size:calc(1vw + 1vh);cursor:pointer; display: inline;" onClick="searchProducts()">&#x1F50D;</div>
    
    <input id="search" style=" color: white; position:absolute; top: 2px; 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>

也here对其进行测试。

Answer 3

在您共享的代码段中，搜索输入元素具有使用非常复杂的公式计算得出的最大值。

我建议设置一个固定的最高值。如果仍要计算，请改用CSS变量。 chyeck下面的示例：

.foo {
  --widthA: 100px;
  --widthB: calc(var(--widthA) / 2);
  --widthC: calc(var(--widthB) / 2);
  width: var(--widthC);
}

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

3 个答案: