英文:
Button on two inputs layout in html css
问题
如何创建类似于这个布局，使按钮位于两个输入框之间？
我只有这段代码，不知道如何将按钮附加到两个输入框。
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<label>First</label>
<input type="text">
<br>
<input type="image" height="30" src="https://www.pngitem.com/pimgs/m/627-6274702_exchange-arrows-icons-png-clipart-png-download-exchange.png" />
<br>
<label>Second</label>
<input type="text">
</body>
</html>
你可以尝试这个代码。
英文:
How can I create a layout similar to this one so that button is on two inputs?
I have only this code and no idea how to make button attached to two inputs.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<label>First</label>
<input type="text">
<br>
<input type="image" height="30" src="https://www.pngitem.com/pimgs/m/627-6274702_exchange-arrows-icons-png-clipart-png-download-exchange.png" />
<br>
<label>Second</label>
<input type="text">
</body>
</html>
<!-- end snippet -->
答案1
得分: 1
以下是您要翻译的内容：
有许多不同的方法来做到这一点，但从您所拥有的开始，您可以通过使用负边距来实现正确的位置：
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<html>
<head>
<title>Page Title</title>
</head>
<body>
<input type="text">
<input type="image" height="30" src="https://www.pngitem.com/pimgs/m/627-6274702_exchange-arrows-icons-png-clipart-png-download-exchange.png" style="z-index:1;position:relative;margin-bottom:-20px;margin-left:-50px;"/>
<br>
<input type="text" />
</body>
</html>
<!-- end snippet -->
或者使用相对定位。这真的取决于上下文。
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<input type="text">
<input type="image" height="30" src="https://www.pngitem.com/pimgs/m/627-6274702_exchange-arrows-icons-png-clipart-png-download-exchange.png" style="z-index:1;position:relative;right:50px;top:20px;"/>
<br>
<input type="text" />
</body>
</html>
<!-- end snippet -->
更多信息，请阅读：
https://stackoverflow.com/questions/5256211/negative-margins-vs-relative-positionin
我也强烈认为，在您的图片中，这不是两个输入框，而是两个
希望这对您有所帮助。
英文:
There are many different way to do this, but starting from what you've got, you could achieve the right position either with negative margins:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<html>
<head>
<title>Page Title</title>
</head>
<body>
<input type="text">
<input type="image" height="30" src="https://www.pngitem.com/pimgs/m/627-6274702_exchange-arrows-icons-png-clipart-png-download-exchange.png" style="z-index:1;position:relative;margin-bottom:-20px;margin-left:-50px;"/>
<br>
<input type="text" />
</body>
</html>
<!-- end snippet -->
Or with relative positioning. It really depends on the context.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<input type="text">
<input type="image" height="30" src="https://www.pngitem.com/pimgs/m/627-6274702_exchange-arrows-icons-png-clipart-png-download-exchange.png" style="z-index:1;position:relative;right:50px;top:20px;"/>
<br>
<input type="text" />
</body>
</html>
<!-- end snippet -->
For more on this, please read :
https://stackoverflow.com/questions/5256211/negative-margins-vs-relative-positionin
I also strongly believe that in your picture these are not two inputs but rather two divs and in each div there is a label and an input from which the border has been removed.
Hopefully this helps you to get started.
答案2
得分: 1
以下是您提供的HTML代码的中文翻译：
<!DOCTYPE html>
<html>
<body>
<style>
.input-container {
position: relative;
width: 400px;
}
.input-container div{
border: 2px solid grey;
display: flex;
justify-content: space-between;
}
.input-container input{
width: 80%;
border: none;
outline: none;
}
#button{
position: absolute;
right: 10%;
top: 50%;
transform: translate(0, -50%);
border: none;
background: transparent;
z-index: 1;
}
</style>
<div class="input-container">
<div>
<label>第一项 </label>
<input type="text" placeholder="输入1">
</div>
<div>
<label>第二项</label>
<input type="text" placeholder="输入2">
</div>
<button id="button"><img height="20" src="https://www.pngitem.com/pimgs/m/627-6274702_exchange-arrows-icons-png-clipart-png-download-exchange.png" />
</button>
</div>
</body>
</html>
请注意，代码部分没有进行翻译。如果您有任何其他需求，请随时告诉我。
英文:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<body>
<style>
.input-container {
position: relative;
width: 400px;
}
.input-container div{
border: 2px solid grey;
display: flex;
justify-content: space-between;
}
.input-container input{
width: 80%;
border: none;
outline: none;
}
#button{
position: absolute;
right: 10%;
top: 50%;
transform: translate(0, -50%);
border: none;
background: transparent;
z-index: 1;
}
</style>
<div class="input-container">
<div>
<label>First </label>
<input type="text" placeholder="input1">
</div>
<div>
<label>Second</label>
<input type="text" placeholder="input2">
</div>
<button id="button"><img height="20" src="https://www.pngitem.com/pimgs/m/627-6274702_exchange-arrows-icons-png-clipart-png-download-exchange.png" />
</button>
</div>
</body>
</html>
<!-- end snippet -->
答案3
得分: 1
作为切换按钮，用于在两个位置之间切换值。您可以使用输入类型单选按钮和使用按钮作为切换值的开关。这是一个示例：
<div class="parent">
<div class="child">
<input type="radio" name="location" id="liverpool_to_belfast" value="liverpool_to_belfast" checked>
<label for="liverpool_to_belfast">Liverpool → Belfast</label>
</div>
<div class="child">
<input type="radio" name="location" id="belfast_to_liverpool" value="belfast_to_liverpool">
<label for="belfast_to_liverpool">Belfast → Liverpool</label>
</div>
<div class="switch_parent">
<div class="switch">
<span>↑</span>
<span>↓</span>
</div>
</div>
</div>
默认情况下，第一个输入字段（liverpool_to_belfast）被选中，因此在开始时值为“liverpool_to_belfast”。
在JavaScript中，“Test Value”注释后的代码仅用于测试目的。由于单选按钮是隐藏的，因此它将在控制台中显示更新后的值。您可以将其删除。
英文:
As switch button, is for switching the values between two locations. You can use input type radio button and use button as a switch for switching the values. Here is an example:-
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const switchBtn = document.querySelector('.switch');
const liverpool_to_belfast = document.querySelector('[value="liverpool_to_belfast"]');
const belfast_to_liverpool = document.querySelector('[value="belfast_to_liverpool"]');
switchBtn.addEventListener("click", () => {
if (liverpool_to_belfast.checked) {
liverpool_to_belfast.checked = false;
belfast_to_liverpool.checked = true;
} else {
liverpool_to_belfast.checked = true;
belfast_to_liverpool.checked = false;
}
// Test Value
document.querySelectorAll('[name="location"]').forEach(btn => {
if (btn.checked) {
console.log(btn.value);
}
});
});
<!-- language: lang-css -->
.parent {
border: 1px solid gray;
border-radius: 10px;
width: max-content;
height: max-content;
display: flex;
flex-direction: column;
position: relative;
}
.child {
padding: 1rem;
}
.child:first-child {
border-bottom: 1px solid gray;
}
input[name="location"]{
display: none;
}
.switch_parent {
width: 100%;
height: 100%;
position: absolute;
}
.switch {
border-radius: 50%;
padding: 0.5rem;
background-color: rgb(196, 196, 196);
width: max-content;
position: absolute;
top: 50%;
right: 5%;
transform: translateY(-50%);
cursor: pointer;
user-select: none;
}
<!-- language: lang-html -->
<div class="parent">
<div class="child">
<input type="radio" name="location" id="liverpool_to_belfast" value="liverpool_to_belfast" checked>
<label for="liverpool_to_belfast">Liverpool &rarr; Belfast</label>
</div>
<div class="child">
<input type="radio" name="location" id="belfast_to_liverpool" value="belfast_to_liverpool">
<label for="belfast_to_liverpool">Belfast &rarr; Liverpool</label>
</div>
<div class="switch_parent">
<div class="switch">
<span>&uarr;</span>
<span>&darr;</span>
</div>
</div>
</div>
<!-- end snippet -->
- By default, the first input field (liverpool_to_belfast) is checked. So, the value is "liverpool_to_belfast" in the start.
- In JavaScript, the code after the comment "Test Value" is for testing purpose only. As Radio button is hidden, so it will show updated Value in the console. You can remove it.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
- 本文由 huangapple 发表于 2023年5月18日 00:27:54
- 转载请务必保留本文链接：https://go.coder-hub.com/76274269.html
- button
- css
- html
- input
- javascript
评论