https://codepen.io/LukzzXB/pen/yrMjxg
所以我正在使用 CSS 编写一个文本框。如果您看到上面的链接，您会看到当我将鼠标悬停在按钮上时，“键入要搜索”在向右移动时工作正常。
现在我只是想让按钮的背景也与文本框一起使用。
所以这里的目标是尝试让盒子向右且仅向右展开。
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js">
</script>`enter code here`
</head>
<head>
<title>Using CCS for the first time</title>
</head>
<head>
<style>
h1 {
color: orange;
text-align: left;
}
</style>
</head>
<body>
<h1>
<span style="font-family:Arial">Hello and welcome to a search box</span>
</h1>
</body>
<head>
<body>
<div class="search-box">
<input class="search-txt" type="text" name="" placeholder="Type to search">
<a class="search-btn" href="#">
<i class="fas fa-search"></i>
</a>
</div>
</head>
</body>
</html>
body {
margin: 0;
padding: 0;
background: red;
}
.search-box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #2f3640;
height: 40px;
border-radius: 40px;
padding: 10px;
}
.search-box:hover > .search-txt{
width: 240px;
padding: 0 6px;
}
.search-box:hover > .search-btn{
background: white;
}
.search-btn{
float: left;
color: red;
width: 40px;
height: 40px;
border-radius: 50%;
background: none;
display: flex;
justify-content: center;
align-items: center;
transition: 0.4;
}
.search-txt{
position: absolute;
float: right;
border: none;
background: none;
outline: none;
padding: 0;
color: white;
font-size: 16px;
transition: 0.4s;
line-height: 40px;
width: 0px;
}
最佳答案
是这样的吗？
https://codepen.io/anon/pen/eovbjW
页面上应该只有一个 HEAD 和一个 BODY 标签。
是 float + display:flex 把事情搞砸了。老实说，现在我自己很少使用 float。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<title>Using CCS for the first time</title>
</head>
<body>
<h1>Hello and welcome to a search box</h1>
<div class="search-box">
<div class="fas fa-search"></div>
<input class="search-txt" type="text" placeholder="Type to search" />
</div>
</body>
</html>
CSS
[edit] 如果您不熟悉 CSS 变量，我在 .search-text 中使用它们作为如何使用它们的指南。在 .search-text 的 left 属性中，我什至使用 calc() 将两个 CSS 变量相加。
:root {
--background-black: #2f3640;
--background-red: red;
--search-box-padding: 10px;
--search-box-size: 40px;
}
html, body {
margin: 0;
padding: 0;
background-color: var(--background-red);
}
h1 {
color: orange;
font-family: Arial;
margin-left: 1rem;
}
.search-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%);
height: var(--search-box-size);
width: var(--search-box-size);
background-color: var(--background-black);
border-radius: 50%;
padding: var(--search-box-padding);
cursor: pointer;
}
.search-box > .fa-search {
padding: var(--search-box-padding);
width: 100%;
height: 100%;
box-sizing: border-box;
border-radius: 50%;
color: var(--background-red);
}
.search-box:hover > .fa-search {
background: white;
}
.search-txt {
position: absolute;
top: var(--search-box-padding);
left: calc(var(--search-box-size) + var(--search-box-padding));
border: none;
outline: none;
padding: 0;
height: var(--search-box-size);
width: 0px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
background-color: var(--background-black);
color: white;
font-size: 16px;
transition: 0.4s width, 0.4s padding;
}
.search-box:hover > .search-txt{
width: 240px;
padding: 0 0.75rem;
}
关于CSS 搜索框扩展，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55617023/