英文:
Make input field and button that move/resize together but do not move another elements
问题
以下是您提供的内容的中文翻译：
我有这些文本字段和搜索按钮以及其他一些按钮：
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
button {
font-family: Arial Narrow, sans-serif;
font-size: 20pt;
}
.search {}
.search:after {
content: "";
clear: both;
display: table;
}
.search input {
font-family: Arial Narrow, sans-serif;
font-size: 20pt;
width: 160px;
height: 42px;
padding-left: 15px;
border-radius: 42px;
border: 2px solid #404040;
background: #FFDFBF;
outline: none;
position: relative;
transition: .3s linear;
}
.search input:focus {
width: 512px;
}
.search button {
width: 42px;
height: 42px;
background: none;
border: none;
position: relative;
left: -44px;
}
<!-- language: lang-html -->
<DIV class="search">
<INPUT type=text name="q">
<BUTTON>🔎</BUTTON>
</DIV>
<BUTTON>其他一些按钮...</BUTTON>
<BUTTON>其他一些按钮 2...</BUTTON>
<!-- end snippet -->
我需要其他按钮在文本字段处于正常状态时放在其右侧，但在文本字段调整大小时不移动（它们必须位于字段后面）。
但是，搜索按钮必须保持绑定在文本字段的右侧。
谁知道如何做到这一点？
英文:
I have these text field and button for search and some other button:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
button {
font-family: Arial Narrow, sans-serif;
font-size: 20pt;
}
.search {}
.search:after {
content: "";
clear: both;
display: table
}
.search input {
font-family: Arial Narrow, sans-serif;
font-size: 20pt;
width: 160px;
height: 42px;
padding-left: 15px;
border-radius: 42px;
border: 2px solid #404040;
background: #FFDFBF;
outline: none;
position: relative;
transition: .3s linear;
}
.search input:focus {
width: 512px;
}
.search button {
width: 42px;
height: 42px;
background: none;
border: none;
position: relative;
left: -44px;
}
<!-- language: lang-html -->
<DIV class="search">
<INPUT type=text name="q">
<BUTTON>🔎</BUTTON>
</DIV>
<BUTTON>Some other button...</BUTTON>
<BUTTON>Some other button 2...</BUTTON>
<!-- end snippet -->
I need other buttons to be placed right of the text field when it is in the normal state but NOT to move when the text field is resized (they must be behind the field).
But the search button must remain bound to the right side of the text field.
Who knows how to do this?
答案1
得分: 1
你需要将内容包裹在 <div style="position: relative;"> 中，并将其他按钮的位置设置为 position: absolute;，左侧值为输入框的宽度加上间距，并给它们设置负 z-index 值，使其位于搜索输入框后面。
类似这样的代码：
<div style="position: relative;">
<div class="search">
<input type="text" name="q">
<button>🔎</button>
</div>
<div class="other-btn">
<button>一些其他按钮...</button>
<button>一些其他按钮...</button>
</div>
</div>
注意：也请使用小写字母编写 HTML 标签，这是一种良好的做法。可参考此 SO 问题 了解更多信息。
英文:
You need to wrap the content in div position: relative;, and make other button position absolute with left value width of input + spacing, and also give negative z-index to go behind the search input.
Something like this:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.container {
position: relative;
}
.other-btn {
position: absolute;
top: 0;
left: 200px;
z-index: -1;
}
button {
font-family: Arial Narrow, sans-serif;
font-size: 20pt;
}
.search {}
.search:after {
content: "";
clear: both;
display: table
}
.search input {
font-family: Arial Narrow, sans-serif;
font-size: 20pt;
width: 160px;
height: 42px;
padding-left: 15px;
border-radius: 42px;
border: 2px solid #404040;
background: #FFDFBF;
outline: none;
position: relative;
transition: .3s linear;
}
.search input:focus {
width: 512px;
}
.search button {
width: 42px;
height: 42px;
background: none;
border: none;
position: relative;
left: -44px;
}
<!-- language: lang-html -->
<div class="container">
<div class="search">
<input type=text name="q">
<button>🔎</button>
</div>
<div class="other-btn">
<button>Some other button...</button>
<button>Some other button...</button>
</div>
</div>
<!-- end snippet -->
Note: Also use lowercase for html tags, it's a good practice. Refer this SO question for more info.
答案2
得分: 0
.search {
display: inline-block;
}
英文:
.search {
display: inline-block;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论