Html 导航按钮设计问题

我试图将我的导航（总共4个项目）设计成圆形，每个项目间隔约20像素，位于屏幕的右上角。然而，现在每个导航项目都以我想要的方式出现（在它自己的一个圆圈中），当我将它们全部放置在右上角时，前3个导航项目消失了，只有第4个导航项目可见。请帮忙

HTML:

尝试：

#导航{
位置：绝对位置；
顶部：50px；
右：100px；
}
.导航按钮{
列表样式类型：无；
文本转换：大写；
文字装饰：无；
显示：块；
宽度：100px；
高度：100px；
边界半径：50px；
字体大小：14px；
颜色：#ffffff；
线高：108px；
文本对齐：居中；
背景：#4FA5B1；
}
保险商实验室{
宽度：50倍；
填充：0；
保证金：0；
溢出：自动；
列表样式类型：无；
}
李{
宽度：20%；
利润率：15%；
}

这是因为您的

导航按钮

元素具有

位置：绝对

，因此它们相互重叠，即只有最后一个元素可见

请尝试以下代码段：

.navbutton{
列表样式类型：无；
文本转换：大写；
文字装饰：无；
显示：内联块；
宽度：100px；
高度：100px；
边界半径：50px；
字体大小：14px；
颜色：#ffffff；
线高：108px；
文本对齐：居中；
背景：#4FA5B1；
位置：相对；/*已添加*/
}
保险商实验室{
宽度：50倍；
填充：0；
保证金：0；
溢出：自动；
列表样式类型：无；
}
李{
宽度：20%；
利润率：20px；
}

这个怎么办：

#导航{
位置：绝对位置；
顶部：50px；
右：100px；
}
.导航按钮{
列表样式类型：无；
文本转换：大写；
文字装饰：无；
显示：块；
宽度：100px；
高度：100px；
边界半径：50px；
字体大小：14px；
颜色：#ffffff；
线高：108px；
文本对齐：居中；
背景：#4FA5B1；
}
保险商实验室{
宽度：100%；
填充：0；
保证金：0；
溢出：自动；
列表样式类型：无；
}
李{
宽度：120px；
浮动：左；
}

如果希望导航位于页面的右上角，请使用以下CSS：

#nav { 
    position: absolute; 
    top: 0; 
    right: 0; 
}

#nav li { 
    display: inline-block; 
}

.navbutton {
  list-style-type: none;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 50px;
  font-size: 14px;
  color: #ffffff;
  line-height: 108px;
  text-align: center;
  background: #4FA5B1;
  position: relative; /* ADDED */
}

ul {
    width: 50x;
    padding: 0;
    margin: 0;
    overflow: auto;
    list-style-type: none;
}

li {
    width: 100px;
    margin: 20px; 
}

#导航{
位置：绝对位置；
顶部：50px；
右：100px；
}
.导航按钮{
列表样式类型：无；
文本转换：大写；
文字装饰：无；
显示：内联块；
宽度：100px；
高度：100px；
边界半径：50px；
字体大小：14px；
颜色：#ffffff；
线高：108px；
文本对齐：居中；
背景：#4FA5B1；
}
保险商实验室{
填充：0；
保证金：0；
溢出：自动；
列表样式类型：无；
}
李{
利润率：20px；
浮动：左；
}

首先，这里的html无效。`First li a`-->其次，ul width-->width:50x的值无效；-->宽度：50px；

.navbutton {
  list-style-type: none;
  text-transform: uppercase;
  text-decoration: none;
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 50px;
  font-size: 14px;
  color: #ffffff;
  line-height: 108px;
  text-align: center;
  background: #4FA5B1;
  position: absolute;
  top: 50px;
  right: 100px;}

ul {
    width: 50x;
    padding: 0;
    margin: 0;
    overflow: auto;
    list-style-type: none;
}

li {
    width: 20%;
    margin: 15%;
}

#nav { 
    position: absolute; 
    top: 0; 
    right: 0; 
}

#nav li { 
    display: inline-block; 
}

.navbutton {
  list-style-type: none;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 50px;
  font-size: 14px;
  color: #ffffff;
  line-height: 108px;
  text-align: center;
  background: #4FA5B1;
  position: relative; /* ADDED */
}

ul {
    width: 50x;
    padding: 0;
    margin: 0;
    overflow: auto;
    list-style-type: none;
}

li {
    width: 100px;
    margin: 20px; 
}