搜索栏 CSS 定位不正确

Question

我正在尝试创建一个网站。其中有一个我从 youtube 获得的动画搜索栏。我正在尝试将 flexbox 用于我的导航栏，除了我的搜索栏的位置外，一切正常。到目前为止我的导航栏的图片。

这是我的 html 和 css 的代码，其中一些被删掉了。

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://kit.fontawesome.com/20c0c25f7c.js" crossorigin="anonymous"></script>
    <title>HTML Elements Reference</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="favicon.ico">
    <style>
        body{
            font-family: Helvetica, sans-serif;
            background: black;
            margin: 0;
            padding: 0;
        }
        .container{
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-direction: row;
            width: 100%;
        }
        .search-box{
            display:inline-block;
            transform: translate(0%, -50%);
            background: #2f3640;
            height: 40px;
            border-radius: 40px;
            padding: 10px;
        }  
        .search-box:hover > .search-txt {
            width: 240px;
            padding: 0 6px;
        }
        .search-box > .search-btn {
            background: black;
        }
        .search-btn{
            color: #53e3f8;
    float: left;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #2f3640;
    display: flex;
    justify-content: center;
    align-items: center;
}
.search-txt{
    border: none;
    background: none;
    outline: none;
    float: right;
    padding: 0;
    color: white;
    font-size: 16px;
    transition: 0.4s;
    line-height: 40px;
    width: 0px;
}

    </style>
</head>
<body>
    
    <nav class="container">
        <div class="search-box">
            <input class= "search-txt" type="test" name="" placeholder="Search...">
            <a class="search-btn" href="#"><i class="fas fa-search"></i></a>
        </div>
    </nav>

</body>
</html>

你能帮我解决一下 CSS 和 HTML 并且 尽量不要在搜索栏中使用边距属性 。我希望搜索栏在我的 flexbox 中完全居中。

Answer 1

As mdn says:

The translate() CSS function repositions an element in the horizontal and/or vertical directions. Its result is a data type.

因此，只需删除属性 transform: translate(0%, -50%); 即可正确放置您的搜索栏：

.search-box{
  display:inline-block;  
  background: lightseagreen;
  height: 40px;
  border-radius: 40px;
  padding: 10px;
}

一个例子：

body{
  font-family: Helvetica, sans-serif;
  margin: 0;
  padding: 0;
}
.container{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
}




.search-box{
  display:inline-block;  
  background: lightseagreen;
  height: 40px;
  border-radius: 40px;
  padding: 10px;
}

.search-box:hover > .search-txt {
  width: 240px;
  padding: 0 6px;
}
.search-box > .search-btn {
  background: lightgreen;
}
.search-btn{
  color: #53e3f8;
float: left;
width: 40px;
height: 40px;
border-radius: 50%;
background: lightpink;
display: flex;
justify-content: center;
align-items: center;
}
.search-txt{
border: none;
background: none;
outline: none;
float: right;
padding: 0;
color: white;
font-size: 16px;
transition: 0.4s;
line-height: 40px;
width: 0px;
}

<nav class="container">
    <div class="search-box">
      <input class="search-txt" type="test" name="" placeholder="Search...">
      <a class="search-btn" href="#"><i class="fas fa-search"></i></a>
    </div>
  </nav>

更新：

当您在 translate 函数中使用双百分比值 transform: translate(0%, -50%); 时，第二个值用于 the height of the reference box:

This value describes two or values representing both the abscissa (x-coordinate) and the ordinate (y-coordinate) of the translating vector. A percentage as first value refers to the width, as second part to the height of the reference box defined by the transform-box property.

搜索栏 CSS 定位不正确

Search bar CSS not positioning it correctly

html

css

searchbar