Question

如何使我的垂直菜单水平，更改字体和下划线，以及使用CSS删除项目符号？

<div class="nav-menu"> </div>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="menu.html">Our menu</a></li>
<li><a href="Location.html">Our Locations</a>
<li><a href="contact.html">Contact Us</a>   
</ul>


.nav-menu {float:left;
          list-style-type: none;
          font-family: "heiti sc"
}

Answer 1

您的<ul>未包含在<nav class="nav-menu">中。首先把它放进去。然后，您可以定位：{/ p>中的<ul>和<li>元素

.nav-menu li {
  list-style: none;   <------ this removes the bullets
  display: inline;    <------ this makes it horizontal, can also use inline-block
  font-family: "heiti sc"
}

.nav-menu li a,
.nav-menu li a:hover,
.nav-menu li a:active,
.nav-menu li a:visited {
  text-decoration: none;   <--- removes underline
}

Answer 2

.nav-menu > ul {
          list-style : none;
          list-style-type: none;
          margin : 0;
          padding : 0;
}
.nav-menu > ul > li {
          float:left;
}
.nav-menu > ul > li > a{
              text-decoration : none;
              font-family: "heiti sc";
    }

Answer 3

<div class="nav-menu"> </div>
<ul class="noballs">
   <li><a href="index.html">Home</a></li>
   <li><a href="about.html">About Us</a></li>
   <li><a href="menu.html">Our menu</a></li>
   <li><a href="Location.html">Our Locations</a>
   <li><a href="contact.html">Contact Us</a>   
</ul>


.noballs li {list-style: none}

Answer 4

这里可能还有一些帮助，为视觉效果添加了一些其他内容，但它会按照你的要求提供。

.nav-menu {
    width: 850px;
    height: 25px;
    margin: 0 auto;
    padding: 0;
    border-color:#1b277e;
    border-style:solid;
    border-width:1px;
}

.nav-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: normal;
}

.nav-menu li {
    float: left;
    display: block;
}

.nav-menu a {
    display: block;
    margin-right: -1px;
    height: 12px;
    padding: 4px 20px 9px 20px;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    font-weight: bold;
    color: #737cc9;
    border: none;
    border-left: 1px solid #1b277e;
    border-right: 1px solid #1b277e;
}

JSFiddle

如何使垂直菜单水平删除子弹下划线和用css更改字体？

4 个答案: