我试图将搜索框向左扩展，但不知何故它占用了宽度并向右扩展。我尝试给左边距但仍然不起作用。
这里它向右扩展，但我希望它向左扩展。我尝试添加左侧填充，但它在框内而不是在框外受到影响。
2
730.search-click {
border: 1px solid #ccc;
outline: none;
background-size: 22px;
background-position: 13px;
border-radius: 100px;
width: 363px;
height: 40px;
padding: 21px;
transition: all 0.5s;
margin-top: 54px;
text-overflow: ellipsis;
position: relative;
overflow: hidden;
//margin-left: -410px;
}
.search-click:focus {
width: 800px;
padding-left: 20px;
}
.search-click input {
background: transparent;
border: 1px solid #ccc;
outline: none;
position: absolute;
width: 300px;
height: 50px;
left: 0%;
padding: 10px;
}
<input type="text" class="search-click" placeholder="Search ports, countries, international code port" />
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
如果你想从右边展开，只需在
.search-click中添加text-align: end;即可。对于左侧的宽度过渡，我已将输入的位置更改为右侧。更改了
position:absolute和right:0;顶部：0。.search-click { border: 1px solid #ccc; outline: none; background-size: 22px; background-position: 13px; border-radius: 100px; width: 100px; padding: 21px; transition: all 0.5s; text-overflow: ellipsis; position: relative; overflow: hidden; text-align: left; position: absolute; right: 0; top: 0; margin: 1em; } .search-click:focus { width: 400px; padding-left: 20px; }