所以我正在尝试创建一个导航菜单标题,它还包含一个 Logo ,非常简单,但左侧的一些按钮与 Logo 本身是内联 block ,它们出现在 Logo 的底部,根据顺序在它的右边,但在底部,我不确定如何使用 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 解决它的多种方法。最简单的方法是在 button
类中使用 vertical-align: top
。不过,我建议您查看 display: flex
。垂直对齐要容易得多。
在这里工作 JSFiddle:http://jsfiddle.net/Lhefbudx/
希望这对您有所帮助。
关于标题中的 CSS 定位元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53331281/