输入大小增加时如何使按钮移动
我有这样的页面
<!doctype html>
<html>
<head>
<link rel="icon" type="image/png" href="peet.png"/> <title>Surge</title>
<link rel="stylesheet" type="text/css" href="style.css" >
</head>
<body>
<div class="desktop">
<div class="headermenu">
<div id="wrapper">
<div align="left">
<div class="logo" style=" font-size: 39px;">Surge</div>
</div><div class="search_box"><form method="get" action="/search/search.php" id="search"><input type="text" name="q" placeholder="Search..." /><button class="attach" type="submit"><img src="search.png" width="35px" height="35px"/></button>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
style.css看起来像这样：
*{
font-family: Comic Sans Ms;
margin: 0px;
padding: 0px;
font-size: 17px;
}
body{
background-color: whitesmoke;
}
.headermenu{
background-color: #00b9ed;
height: 67px;
border-bottom: 0px;
padding-left: auto;
padding-right: auto;
width: 100%;
border-bottom: 0.5px solid gray;
}
#wrapper{
margin-left: auto;
margin-right: auto;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 10px;
}
.logo{
width: 125px;
font-family: Lucida Handwriting;
}
.search_box input{
background-color: #00b9ed;
outline: none !important;
border: 1px solid black;
position: absolute;
top: 13px;
margin-left: 190px;
width: 300px;
}
#search input[type=text]{
padding: 6px 15px 6px 35px;
text-shadow: 0 2px 2px rgba(0,0,0,0.3);
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.1), 0 1px 3px rgba(0,0,0,0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255,255,255,0.1), 0 1px 3px rgba(0,0,0,0.2) inset;
box-shadow: 0 1px 0 rgba(255,255,255,0.1), 0 1px 3px rgba(0,0,0,0.2) inset;
-webkit-transition:all 0.7s ease 0s;
-moz-transition:all 0.7s ease 0s;
-o-transition:all 0.7s ease 0s;
transition:all 0.7s ease 0s;
}
#search input[type=text]:focus{
background-color: rgb(46,122,237);
color: white;
width: 400px;
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.1), 0 1px 0 rgba(0,0,0,0.9) inset;
-moz-box-shadow: 0 1px 0 rgba(255,255,255,0.1), 0 1px 0 rgba(0,0,0,0.9) inset;
box-shadow: 0 1px 0 rgba(255,255,255,0.1), 0 1px 0 rgba(0,0,0,0.9) inset;
text-shadow: 0 2px 3px rgba(0,0,0,0.1);
}
* {
box-sizing: border-box;
}
.attach{
position: absolute;
outline: none !important;
border: none;
top: 13px;
margin-left: 490px;
height: 38px;
background-color: #00b9ed;
border-bottom: 1px solid black;
border-right: 1px solid black;
border-top: 1px solid black;
}
.attach{
margin-left: 590px;
}
@media all and (max-width: 959px) {
.desktop {
display: block;
}
.mobile {
display: none;
}
}@media all and (max-width: 479px) {
.desktop {
display: none;
}
.mobile {
display: block;
}
}
根据代码，当搜索栏不专注于宽度时为300px（我很想放一张图片，但堆栈溢出不允许我），并且右边附有一个搜索按钮
但是当搜索栏关注的长度增加到400px时（我是故意这样做的）
现在我想要的是，当搜索栏聚焦在搜索按钮上时，按钮仍将被附加，但是按钮保持停滞，输入通过背面 请尽量简单地解释一下（我是菜鸟）
查看下面的图片以了解更多信息
This is the page when the search bar is not focused on
this is the page when focused on
如您所见，当它专注于 再次，我想要的是当搜索栏聚焦在搜索图标上时
很抱歉这么长
©版权所有2020 Coolcat
3 个答案:
答案 0 :(得分：0)
这应该可以帮助您进行查询。
SELECT A.foo_id, A.bar, ROW_NUMBER() OVER ()
FROM (
SELECT foo_id, bar FROM foo_table
WHERE (foo_id = '1' OR related_foo_id = '1')
AND foo_body -> 'type' = 'My_foo_type';
ORDER BY timestamp ASC) A
GROUP BY foo_id, bar;
╔═════════╦══════════╦══════════════╦══════════════╦
║ foo_id ║ bar ║ timestamp ║ row_number ║
╠═════════╬══════════╬══════════════╬══════════════╬
║ 1 ║ 1 ║ 10 ║ 1 ║
║ 1 ║ 2 ║ 25 ║ 2 ║
║ 2 ║ 1 ║ 15 ║ 3 ║
╚═════════╩══════════╩══════════════╩══════════════╩
答案 1 :(得分：0)
在#search input[type=text]中添加
#search input[type=text] {
position: relative; //+
top: -30px; //+
删除所有这些代码：
.attach{
position: absolute;
outline: none !important;
border: none;
top: 13px;
margin-left: 490px;
height: 38px;
background-color: #00b9ed;
border-bottom: 1px solid black;
border-right: 1px solid black;
border-top: 1px solid black;
}
.attach{
margin-left: 590px;
}
，然后将其替换为：
.attach{
position: absolute;
outline: none !important;
border: none;
top: 15px;
margin-left: 10px;
height: 38px;
background-color: #00b9ed;
border-bottom: 1px solid black;
border-right: 1px solid black;
border-top: 1px solid black;
}
答案 2 :(得分：0)
我已经调整了您的HTML和CSS，以实现所需的功能。
请注意，您所需要的永远都不会做。它使您的页面无法通过WCAG验证，因为当按钮将其隐藏时，它将使搜索文本框的部分内容无法访问。
我删除了CSS中没有意义的内容。例如，填充不能设置为auto。使用它是一个实际的错误。而且，您应避免将值0px用于任何东西。零就是零。写类似margin: 0;而不是margin: 0px;
并且，避免使用绝对定位。仅在无法避免的情况下使用它。
查看随附的代码段，看看它是否在满足您的要求。
* {
font-family: Comic Sans Ms;
margin: 0;
padding: 0;
font-size: 17px;
}
body {
background-color: whitesmoke;
}
.headermenu {
background-color: #00b9ed;
height: 67px;
border-bottom: 0;
width: 100%;
border-bottom: 0.5px solid gray;
}
#wrapper {
margin-left: auto;
margin-right: auto;
padding-top: 0;
padding-bottom: 0;
padding-left: 10px;
}
.logo {
width: 125px;
font-family: Lucida Handwriting;
}
.search_box input {
background-color: #00b9ed;
outline: none !important;
border: 1px solid black;
margin-left: 190px;
width: 300px;
}
#search input[type=text] {
padding: 6px 15px 6px 35px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#search input[type=text]:focus {
background-color: rgb(46, 122, 237);
color: white;
width: 400px;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}
* {
box-sizing: border-box;
}
.attach {
outline: none !important;
border: none;
height: 38px;
background-color: #00b9ed;
border-bottom: 1px solid black;
border-right: 1px solid black;
border-top: 1px solid black;
position: fixed;
left: 615px;
}
@media all and (max-width: 959px) {
.desktop {
display: block;
}
.mobile {
display: none;
}
}
@media all and (max-width: 479px) {
.desktop {
display: none;
}
.mobile {
display: block;
}
}
.row {
display: table-row;
}
.col {
display: table-cell;
} <!doctype html>
<html>
<head>
<link rel="icon" type="image/png" href="peet.png"/>
<title>Surge</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="desktop">
<div class="headermenu">
<div id="wrapper" class="row">
<div align="left" class="col">
<div class="logo" style="font-size: 39px;">Surge</div>
</div>
<div class="search_box col">
<form method="get" action="/search/search.php" id="search">
<input type="text" name="q" placeholder="Search..."/>
<button class="attach" type="submit"><img src="search.png" width="35px" height="35px"/></button>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？