时间戳

首页 > 解决方案 > 如何在其他两个 html 元素之间的公共边界上显示一个 html 元素？

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

问题描述

我想在其他两个元素（在我的例子中是输入框）之间的公共边界上显示一个 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 类）

标签： htmlcssreactjsantd

解决方案

截屏

您必须向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>

推荐阅读