antd中select组件与旁边字体水平对齐

最新推荐文章于 2024-08-10 15:49:03 发布

weixin_40541945

最新推荐文章于 2024-08-10 15:49:03 发布

阅读量235

点赞数

分类专栏：每日一个小技巧文章标签：前端 javascript

本文链接：https://blog.csdn.net/weixin_40541945/article/details/130622752

版权

每日一个小技巧专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在前端开发中遇到antd的Select组件与标题字体对齐不一致的情况，为了解决这种视觉上的错乱，需要对字体位置进行微调。通过在p标签中应用CSS样式`transform:translateY(-10px)`，可以将字体上移以达到与Select组件对齐的效果。

摘要由CSDN通过智能技术生成

在前端设计的时候，使用antd的select组件，与旁边的标题字体不在同一中轴线，有一定的错乱感，需要对字体的位置进行微调：

            <Row>
                <Col span={2}>
                    <p style={{ fontSize: '16px', transform: 'translateY(-10px)' }}>
                        <strong>年份</strong>
                    </p>
                </Col>
                <Col span={3}>
                    <YearContext.Provider value={{ yearstate, yeardispatch }}><SelectorYear /></YearContext.Provider>
                </Col>
                <Col span={2}>
                    <p style={{ fontSize: '16px', transform: 'translateY(-10px)' }}>
                        <strong>月度</strong>
                    </p>
                </Col>
                <Col span={6}>
                    <WeekContext.Provider value={{ weekstate, weekdispatch }}><SelectorWeek /></WeekContext.Provider>
                </Col>
            </Row >