如何在其他两个 html 元素之间的公共边界上显示一个 html 元素？

Question

我想在其他两个元素（在我的例子中是输入框）之间的公共边界上显示一个 HTML 元素（在我的例子中是带有一对箭头的交换按钮）。 但是我的交换按钮转到页面的开头。

HTML

<div  style={{
              display: "flex",
              flexFlow: "row",
              justifyContent: "center",
              alignItems: "center"
            }}>

             {/* origin input */}
             <div
              style={{
                marginTop: this.state.marginTop,
                border: "1px solid rgb(36, 2, 2)"
              }}
            >
              <h5 style={{ color: "white" }}>ORIGIN OF SHIPMENT</h5>
              <Dropdown name="origin" placeholder="ORIGIN OF SHIPMENT" />
            </div>



             {/* swap button */}
            <div>
              <h5>
                <span style={{ display: "inline-block", width: "0px" }}> 
              </span>
              </h5>
              <Button
                type="default"
                size="small"
                className={[this.state.css, "swap-button"]}
                shape="circle"
                onClick={this.onSwapLocation}
              >
                <Icon type="swap" />
              </Button>
              </div>


             {/* destination input */}
            <div style={{ marginTop: this.state.marginTop }}>
              <h5 style={{ color: "white" }}>DESTINATION OF SHIPMENT</h5>
              <Dropdown
                name="destination"
                placeholder="DESTINATION OF SHIPMENT"
              />
            </div>

</div>

CSS

.swap-button {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 100;
    background-color: var(--whiteColor);
    color: var(--blueColor);
}

预期的交换按钮图像：[2:

实际交换按钮图片：：

感谢您的回复。谢谢。

Edit01：我只想在其他两个输入框上显示交换按钮。我已经写过 HTML 和 CSS。但是当我使用 position: absolute 时，交换按钮开始启动。我想我需要一些 CSS 方面的帮助（即 .swap-button 类）

Answer 1

您必须向swap 按钮和Destination of Shipment 输入添加一个额外的容器，这样您就可以使用位置absolute 将交换按钮精确地定位在中间，就像您正在做的那样。

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

.container {
  display: flex;
  flex-direction: row;
}

.swap-container {
  position: relative;
}

button {
  position: absolute;
  background: #0084ff;
  top: 10px;
  left: -15px;
  border: none;
  border-radius: 5px;
  padding: 3px;
  font-size: 8px;
  color: #fff;
}

input {
  padding: 10px;
}

<div class="container">
  <input type="text" value="Origin of Shipment"/>
  <div class="swap-container">
    <button>Swap</button>
    <input type="text" value="Destination of Shipment"/>
  </div>
</div>

Answer 2

input#addr_from {
    border-right: 1px solid #cad3db;
}