我对 css 很陌生,我的导航栏看起来很糟糕。我正在尝试使用 css,但我没有比下图更好的了。如果我删除.menu
,图标将垂直对齐;
当然,我已经看过很多关于这个主题的 stackoverflow 帖子并尝试了很多东西,但是再一次,不能比下图更好。
这是我的反应 html 代码。
<ul className="menu">
<li>
<a href="https://discord.com/channels/@me" id="menu-item-41">
<img src={Discord} alt="discord" className="discord-logo"/>
</a>
</li>
<li>
<a href="www.twitter.com" className="page-scroll" id="menu-item-42">
<img src={Twitter} alt="twitter" className="twitter-logo"/>
</a>
</li>
<li>
<a href="#" className="page-scroll" id="menu-item-44">
TAG
</a>
</li>
<li>
<a href="#roadmap-title" className="page-scroll" id="menu-item-43">
ROAD MAP
</a>
</li>
<li>
<a href="#team" className="page-scroll" id="menu-item-45">
TAG2
</a>
</li>
<li>
<button onClick={() => this.connect() }
id="menu-item-47"
className="connect-button">CONNECT
</button>
</li>
</ul>
这是我的CSS:
li.menu-item {
margin-bottom: 40px;
vertical-align: middle;
text-align: center;
}
.menu{
position: left;
display: inline-flex;
text-align: center;
vertical-align: middle;
float: left;
margin: 40;
}
任何建议或观察都将受到超级欢迎!
尝试将您的 css 更改为此
.menu {
display: flex;
justify-content: space-between;
align-items: center;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句