Question

如何在css中使用这些链接分隔并制作菜单？我不想使用ul.li

注意：我无法更改html文件。

HTML：

<body>
    <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>

Answer 1

添加

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

Answer 2

您的回答在这里： 只是改变我的风格。

http://codepen.io/leandroruel/pen/oyjhK

HTML：

 <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>

CSS：

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;
}

Answer 3

假设您正在寻找将div更改为ul / li但您无法编辑HTML ...（无论出于何种原因......）......您可以更改jQuery的元素已在此处得到解答 - how to change an element type using jquery

Answer 4

假设您需要水平菜单，菜单项均匀分布，则可以将display更改为table。下面的小提示是一个全宽度水平菜单，每个.topNaviagationLink容器均匀分布目标。如果您不希望菜单项均匀分布，请从width: 1%;移除.topNaviagationLink。

<强> CSS

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

JSFiddle

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

4 个答案: