尝试在两个框的中心放置一个图标。感谢您的帮助。谢谢。
kmpatx3s1#
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; }
yzuktlbb2#
因为这使用了 Bootstrap ,所以似乎可以将类position-relative添加到容器div中,并且可以为图标添加position-absolute top-50 start-50 translate-middle。现场演示时间:codesandbox发布的codesandbox使用的是reactstrap,但似乎没有按照要求安装bootstrap,因此上面的示例安装了该包。
position-relative
div
position-absolute top-50 start-50 translate-middle
reactstrap
bootstrap
bootstrap-4
还为图标添加了一个自定义类,以添加一些更高的z-index:
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> ); }
2条答案
按热度按时间kmpatx3s1#
App.tsx
styles.css
yzuktlbb2#
因为这使用了 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
: