在css中,可以通过使用flexbox布局来实现居中分开的导航栏。以下是实现的代码:nav { display: flex; justify-content: center; gap: 20px; }
在css中,可以通过使用flexbox布局来实现居中分开的导航栏。以下是实现的代码:
nav { display: flex; justify-content: center; gap: 20px; } nav a { text-decoration: none; color: #000; font-weight: bold; padding: 10px; border: 1px solid #000; }
首先,我们将导航栏设为flex布局,并且设置justify-content属性为center,这样导航栏中的元素会在横轴上居中对齐。然后,我们使用gap属性来设置导航栏中的元素之间的间距。这里的间距是指元素之间的空白区域。
接着,我们对导航栏中的链接(a元素)进行样式设置。将其text-decoration属性设置为none,取消下划线;将其color属性设置为黑色;将其font-weight属性设置为bold,设置为粗体字体;将其padding属性设置为10px,这样就可以添加一定的内边距;最后,我们还对其border属性进行设置,设为1px粗的黑色实线边框。
综上所述,通过这些简单的css样式设置,我们就可以实现一个居中分开的导航栏。
粉丝
0
关注
0
收藏
0