html - 文本填充在 float div 中不起作用

Question

好的，我有一个 float 的 div，其中有一个无组织的列表。

<div class="navigation-nav" id="navigation-nav">
  <ul class="navigation-list">
    <li class="navigation-item"><a class="navigation-link current" href="#">Home</a></li>
    <li class="navigation-item"><a class="navigation-link" href="#about">About</a></li>
    <li class="navigation-item"><a class="navigation-link" href="projects.html">Projects</a></li>
    <li class="navigation-item"><a class="navigation-link" href="#collage">Collage</a></li>
  </ul>
</div>

现在，如果我尝试更改 navigation-item 或 navigation-link 上的填充或边距，它将添加一个填充(这是我想要的)或仅 x 轴的边距，所以左边或右边。我想添加水平填充。我试过添加一个包装器——像这样:

<div class="navigation-nav" id="navigation-nav">
  <div class="navigation-wrapper">
    <ul class="navigation-list">
      <li class="navigation-item"><a class="navigation-link current" href="#">Home</a></li>
      <li class="navigation-item"><a class="navigation-link" href="#about">About</a></li>
      <li class="navigation-item"><a class="navigation-link" href="projects.html">Projects</a></li>
      <li class="navigation-item"><a class="navigation-link" href="#collage">Collage</a></li>
    </ul>
  </div>
</div>

但这并没有奏效。这是所有的 CSS:

    .navigation-nav {
    right: 0;
    float: right;
    width: 50%;
    text-align: right;
}

.navigation-wrapper {
    float: none;
    overflow: visible;
}


.navigation-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: block;
}

.navigation-item {
    display: inline;
    padding: 1em;

}

Answer 1

主要问题是 display: inline; 使您无法正确调整盒模型元素:边框、边距、填充。您可以使用 display: inline-block; 来获得您想要的内容。

我冒昧地做了一些清理工作。这是一个见仁见智的问题，但我对最佳实践的偏好是在 CSS 目标可以在没有太多帮助的情况下处理查找元素时避免过多标记...

HTML

<nav> // using HTML 5 semantic tag
  <ul>
    <li><a class="current" href="#">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="projects.html">Projects</a></li>
    <li><a href="#collage">Collage</a></li>
  </ul>
</nav>

CSS

body {
  margin: 0;
}

nav {
  float: right;
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: block;
}

nav li {
  display: inline-block;
  margin: 0;
}

nav a {
  // within the inline-block parent, it's best practice to 
  // apply any padding to the <a> tag so its click area
  // is much easier for the user to find and click
  display: block;
  padding: 1em;
}