Html 如何在不使用无序列表的情况下，用CSS中的这些链接分离和制作菜单

如何在css中使用这些链接分离和制作菜单？我不想使用

ul.li

注意：我无法更改html文件

html:

只需添加

 #navigacion div {display:inline-block;padding:5px;background:#fafafa}

---

假设您希望将div更改为ul/li，但您没有编辑HTML的能力。。。（无论什么原因……）。。。您可以使用jQuery更改元素，这里已经给出了答案-

假设您想要一个水平菜单，并且菜单项间隔均匀，您可以将

显示设置为类似
表
。下面的提琴是一个全宽水平菜单，每个
.topNaviagationLink
容器的目标间隔均匀。如果不希望菜单项的间距均匀，请删除
宽度：1%来自
.topNaviagationLink

CSS

#navigacion { 
    display: table; 
}
.topNaviagationLink {
    display: table-cell;
    width: 1%;
}
.topNaviagationLink > a {
    display: block;
    padding: 5px 10px;
    text-align: center;
}

您的答案在这里：
只要改变我的风格


HTML:

@亚历克斯普林斯顿他甚至不能更改HTML，所以看起来他被卡住了。因为列表更容易，也更容易convenient@AlexPrinceton他说他不能更改HTML。（无论出于何种原因）如果他不能更改HTML，那么这段代码以及它将如何实现如果你不能最初更改HTML，你仍然可以使用脚本动态添加元素。为什么要否决？正如OP特别提到的，你还可以用css做些什么吗？
#navigacion { 
    display: table; 
}
.topNaviagationLink {
    display: table-cell;
    width: 1%;
}
.topNaviagationLink > a {
    display: block;
    padding: 5px 10px;
    text-align: center;
}

 <div id="navigacion">
        <div class="topNaviagationLink"><a href="index.html">Home</a></div>
        <div class="topNaviagationLink"><a href="index.html">About</a></div>
        <div class="topNaviagationLink"><a href="index.html">History</a></div>
        <div class="topNaviagationLink"><a href="index.html">Services</a></div>
        <div class="topNaviagationLink"><a href="index.html">Contact</a></div>
 </div>

body {
  padding: 0;
  margin: 0;
}

#navigacion {
  width: 100%;
  height: 50px;
  background-color: #eee;
}

#navigacion .topNaviagationLink {
  padding: 0;
  display: inline-block;
}

#navigacion .topNaviagationLink a {
  font-family: arial;
  color: #333;
  text-decoration: none;
  line-height: 50px;
  vertical-align: middle;
  padding: 0 20px;
}

#navigacion .topNaviagationLink a:hover {
  color: red;
}