使导航栏元素的宽度相等，距离相等

要使导航栏元素的宽度相等且距离相等，可以使用CSS中的Flexbox布局或者Grid布局来实现。

1. Flexbox布局： Flexbox是一种弹性盒子布局模型，通过设置容器和子元素的属性来实现元素的等宽和等距离。以下是实现导航栏元素等宽等距离的示例代码：

HTML结构：

<nav class="navbar">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Contact</a>
</nav>

CSS样式：

.navbar {
  display: flex;
  justify-content: space-between;
}

.navbar a {
  flex: 1;
  text-align: center;
}

在上述代码中，通过设置.navbar容器的display: flex;属性，使其成为一个Flex容器。然后，通过设置.navbar容器的justify-content: space-between;属性，使导航栏元素在水平方向上等距离排列。

通过设置.navbar a子元素的flex: 1;属性，使导航栏元素的宽度相等。同时，可以根据需要设置其他样式来美化导航栏。

1. Grid布局： Grid布局是一种二维网格布局模型，通过设置容器和子元素的属性来实现元素的等宽和等距离。以下是实现导航栏元素等宽等距离的示例代码：

HTML结构：

<nav class="navbar">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Contact</a>
</nav>

CSS样式：

.navbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  justify-items: center;
  gap: 10px;
}

在上述代码中，通过设置.navbar容器的display: grid;属性，使其成为一个Grid容器。然后，通过设置.navbar容器的grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));属性，使导航栏元素在水平方向上等宽，并且自动适应容器的宽度。

通过设置.navbar容器的justify-items: center;属性，使导航栏元素在水平方向上居中对齐。

通过设置.navbar容器的gap: 10px;属性，可以设置导航栏元素之间的间距。

以上是使用Flexbox布局和Grid布局来实现导航栏元素的等宽和等距离的方法。在实际应用中，可以根据具体需求选择适合的布局方式。