尝试将图标放置在两个框的中心。感谢您的帮助。谢谢。
尝试将图标放置在两个框的中心。感谢您的帮助。谢谢。
App.tsx
export default function App() {
return (
<Row>
<Col>
<div className="input-group">
<Input
type="text"
className="custom-input origin"
placeholder="Origin"
/>
<img
src="https://cdn-icons-png.flaticon.com/512/1828/1828961.png"
alt="star"
width="15"
className="star"
/>
<Input
type="text"
className="custom-input destination"
placeholder="Destination"
/>
</div>
</Col>
</Row>
);
}
styles.css
.App {
font-family: sans-serif;
text-align: center;
}
.input-group {
position: relative;
}
.input-group .custom-input {
height: 3rem;
letter-spacing: 1.5px;
font-size: 12px;
border-radius: 0px !important;
padding-left: 10px;
}
.input-group .destination {
position: absolute;
left: 170px;
}
.star {
z-index: 999;
position: relative;
left: -8px;
}
.autocomplete {
padding: 0px;
background-size: 17px 15px;
position: absolute;
}
由于使用了 Bootstrap,因此似乎可以将类 position-relative
添加到容器 div
中,并为图标添加 position-absolute top-50 start-50 translate-middle
。
在 codesandbox 上进行了分叉实时演示。
发布的 codesandbox 使用了reactstrap
,但似乎未安装bootstrap
,因此上述示例已安装该软件包。
虽然帖子标记有bootstrap-4
,但安装的版本reactstrap
似乎不支持它,因此此示例已安装了新版本的Bootstrap。如果需要bootstrap-4
,则可能需要替换一些类名为自定义CSS。
还添加了一个自定义类以使图标具有更高的z-index
:
.custom-icon {
z-index: 2500;
}
import "./styles.css";
import { Row, Col, Input } from "reactstrap";
export default function App() {
return (
<Row>
<Col>
<div className="input-group position-relative">
<Input type="text" className="custom-input" placeholder="Origin" />
<Input
type="text"
className="custom-input"
placeholder="Destination"
/>
<img
src="https://cdn-icons-png.flaticon.com/512/1828/1828961.png"
alt="icon"
width="15"
className="position-absolute top-50 start-50 translate-middle custom-icon"
/>
</div>
</Col>
</Row>
);
}
position: absolute;left:40%;
,并在父级div上设置position:relative
. - Anil kumar