Question

我有一个水平导航条，我的链接对角排列而不是水平排列。链接也出现了子弹。

这是我的HTML：

<nav id="site" class="body">
<ul>
  <li id="meet"><a href="meet.html">Meet the Staff</a></li>
  <li id="conditions"><a href="conditions.html">Conditions</a></li>
  <li id="info"><a href="info.html">Patient Information</a></li>
  <li id="billing"><a href="billing.html">Billing & Insurance</a></li>
  <li id="contact"><a id="right" href="https://painandspinecenter.myezyaccess.com">Contact Us</a></li>
</ul>

我的CSS

nav a {
color: #ffffff;
  font-size:13px;
  list-style:none;
  text-decoration:none;
  margin: 0 auto;
  }

nav li a {
  display: block;
  float: left;
  list-style: none;
  height: 44px;
  text-align: center;
  border-right: 1px solid #fff;
  padding-top:10px;
  width: 157px;
  margin: 0 auto;
  text-decoration:none;
  }

nav li a#right {
  border-right: none;
    text-align:top;
  }

网站是painandspinecenter.net

任何帮助都会非常受欢迎！

Answer 1

我认为这就是你想要的。请看这里的小提琴：http://jsfiddle.net/fyw435h3/

你在CSS中错过了这个

nav li{
    display: inline;
}

Answer 2

当您使用LI标签时，您有一些错误包括将A标签用作块元素，请考虑将CSS更改为以下内容：

#site {
    background:#069
}
nav a {
    color: #ffffff;
    font-size:13px;
    list-style:none;
    text-decoration:none;
    margin: 0 auto;
}
nav li {
    display:inline-block;
    list-style: none;
    height: 44px;
    text-align: center;
    border-right: 1px solid #fff;
    padding-top:10px;
    width: 140px;
    margin: 0 auto;
    text-decoration:none;
}
nav li a#right {
    border-right: none;
    text-align:top;
}

<nav id="site" class="body">
    <ul>
        <li id="meet"><a href="meet.html">Meet the Staff</a>
        </li>
        <li id="conditions"><a href="conditions.html">Conditions</a>
        </li>
        <li id="info"><a href="info.html">Patient Information</a>
        </li>
        <li id="billing"><a href="billing.html">Billing & Insurance</a>
        </li>
        <li id="contact"><a id="right" href="https://painandspinecenter.myezyaccess.com">Contact Us</a>
        </li>
    </ul>
</nav>

CSS显示属性

2 个答案: