html - CSS 导航错误

Question

我在创建水平导航时遇到问题。我的问题是当我想弄乱 UL 和 UL 的列表项的边距和填充时。

这些是我遇到的问题:

1. 当我尝试更改 -top 和 -bottom 属性时，似乎我几乎无法获得 UL 的 margin-top 来将列表项向下移动。

2. 当我使用 margin 和 padding 的 -right 和 -left 属性时，导航栏中出现乱码。我曾尝试更改宽度来克服这个问题，但没有帮助。

下面提供的 HTML 和 CSS 代码:

<div id="HorizNav">
  <ul>
    <li><a href="#">Link #1</a></li>
    <li><a href="#">Link #2</a></li>
    <li><a href="#">Link #3</a></li>
    <li><a href="#">Link #4</a></li>
  <ul>
</div>

#HorizNav ul {
  float: right;
  text-Align: left;
  width: 660px;

  background: #ff0000;
  color: #fff;
  font-size: 1.5em;

  padding-top: 0px; padding-bottom: 0px;
  padding-left: 5px; padding-right: 5px;
}

#HorizNav ul li { display: inline; }

#HorizNav ul li a {
  text-decoration: none;
  background-color: #0000ff;
  color: #fff;
}

请帮忙。提前致谢。

Answer 1

您没有收尾 ul标签。第二个<ul>应该是 </ul>

我认为您正在寻找 box-sizing: border-box; .

#HorizNav ul {
    ...
    box-sizing: border-box;
    ms-box-sizing: border-box;
    webkit-box-sizing: border-box;
    moz-box-sizing: border-box;
   ...
}

Demo