我想在其他两个元素(在我的情况下是输入框)的公共边框上显示一个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类)
最佳答案
您必须在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>