如何修复此导航栏？ [英] How to fix this navbar?

问题描述

我如何制作导航栏，以便所有内容都排列在黑色区域。所以每篇文章占25％？ Jsfiddle的分辨率较小。所以它看起来与我的观点不同。我目前在导航栏的中间有4个但是我似乎无法使文本对齐到中心，也没有将填充/边距分隔到右边或左边，因为那样最后一个项目（LONE）换行



链接：https：//jsfiddle.net/9d62xvc6/1/



1680看起来像这样分辨率：https：//gyazo.com/a84a4a331eda54798d3cb8e446ef2b78



我尝试过：



宽度：100％不完全扩展。

Hi, how do I make the navbar so everything is lined up in the black area. So each text covers up 25%? The resolution is smaller in Jsfiddle. So it looks different from my perspective. I currently have all 4 in the middle of the navbar but I can't seem to get the text-align to get centered nor to space the padding/margin to the right or left because then the last item(LONE) Line breaks

Link:https://jsfiddle.net/9d62xvc6/1/

It looks like this with 1680 resolution:https://gyazo.com/a84a4a331eda54798d3cb8e446ef2b78

What I have tried:

Width:100% Doesn't make it fully extended.

推荐答案

删除height属性或设置padding属性以包含空格。

Remove the height attribute or set padding attribute to have spaces around.

.Navbar  {
background-color:black;
margin-left:100px;
margin-top:-21px;
margin-right:100px;
/* height:70px; */
padding: 2px;
opacity:0.8;
text-align:Center;
}

这篇关于如何修复此导航栏？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！