css - 标题中的 CSS 定位元素
问题描述
所以我正在尝试创建一个导航菜单标题,它还包含一个徽标,相当简单,但左侧的一些按钮与徽标本身是内联块,它们出现在徽标的底部,它是基于订购的,但在底部,我不确定如何使用 css 让他们到达容器的顶部,或者他们的容器的顶部是否比我想的低?
import React from 'react';
import {Link} from 'react-router-dom';
import { AuthService } from './backend/client/auth';
import { Paper, Button } from '@material-ui/core';
import { withStyles } from '@material-ui/core/styles';
const styles = theme => ({
container: {
'height': 128,
},
leftnav: {
'display': 'inline-block',
},
rightnav: {
'float': 'right',
},
button: {
'display': 'inline-block',
}
});
class Header extends React.Component {
render() {
const { classes } = this.props;
return (
<Paper className={classes.container}>
<div className={classes.leftnav}>
<Link to="/" className={classes.button}>
<img src="https://imageserver.eveonline.com/Corporation/98523546_128.png" alt="Hole Puncher's Logo"></img>
</Link>
<Button component={Link} to="/">
Home
</Button>
<Button component={Link} to="/store">
Browse
</Button>
<Button component={Link} to="/contact-us">
Contact Us
</Button>
</div>
<div className={classes.rightnav}>
{AuthService.isAuthed()
? <Button component={Link} to="/account/orders">Account</Button>
: ''}
{AuthService.isAuthed()
? <Button component={Link} to="/login">Login</Button>
: <Button onClick={AuthService.logout} component={Link} to="/login"></Button>}
</div>
</Paper>
)
}
}
export default withStyles(styles)(Header);
解决方案
使用 CSS 解决问题的多种方法。最简单的方法是vertical-align: top
在你的button
课堂上使用。但是,我建议您查看display: flex
. 垂直对齐更容易。
在这里工作 JSFiddle:http: //jsfiddle.net/Lhefbudx/
希望这可以帮助。
推荐阅读
- c++ - std::stod(string, &pos) - &pos 和仅 pos 之间的区别
- vue.js - Vue CLI 缩小了生产环境,但是如何缩短属性和其他定义呢?
- python - 如何有效地沿对角线翻转 numpy 数组?
- node.js - 每次启动终端时都会出现 NPM 错误消息 - Node.js
- java - 如何保存最后一个片段?
- verilog - 如何知道 MIPS 指令产生什么控制信号?
- python - 如何将 evalmetrics C3.ai COVID-19 API 的结果转换为 pandas 数据框以便于分析?
- reactjs - 使用关系型 Firestore 模型的最佳方式是什么?
- c++ - 将数组元素向左或向右移动一个空格的函数
- sql - 更好的 sql 查询以提高性能