按钮上的两个输入布局在html的css

58wvjzkj 于 2023-05-19 发布在其他

关注(0)|答案(3)|浏览(117)

我如何创建一个类似的布局，使按钮在两个输入？

我只有这个代码，不知道如何使按钮附加到两个输入。

<!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>

css

来源：https://stackoverflow.com/questions/76274269/button-on-two-inputs-layout-in-html-css

3条答案

按热度按时间

umuewwlo1#

作为开关按钮，用于在两个位置之间切换值。您可以使用输入类型单选按钮和使用按钮作为切换值的开关。下面是一个例子：

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);
        }
      });
    });

.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;
    }

<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>

默认情况下，第一个输入字段（利物浦_to_贝尔法斯特）被选中。因此，开始时的值是“利物浦_to_贝尔法斯特”。
在JavaScript中，注解“测试值”后的代码仅用于测试目的。由于单选按钮被隐藏，所以会在控制台显示更新后的Value。你可以移除它。

赞(0）回复(0）举报 2023-05-19

rta7y2nd2#

有很多不同的方法来做到这一点，但从你有什么开始，你可以实现正确的位置，无论是负利润率：

<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>

或者相对定位。这真的取决于上下文。

<!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>

有关此方面的更多信息，请阅读：Negative margins vs relative positioning
我也坚信，在你的图片中，这些不是两个输入，而是两个div，在每个div中有一个标签和一个边框被删除的输入。
希望这能帮助你开始。

赞(0）回复(0）举报 2023-05-19

mbjcgjjk3#

<!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>

赞(0）回复(0）举报 2023-05-19

我来回答

按钮上的两个输入布局在html的css

3条答案

相关问题

热门标签

最新问答