Html 文本填充在浮动div中不起作用

好的，我有一个浮动div，其中有一个无组织的列表

现在，如果我尝试更改导航项目或导航链接上的填充或边距，它将在x轴上添加一个填充（这是我想要的）或一个边距，即左或右。我想添加水平填充。我尝试添加一个包装器-如下所示：

但这并不奏效。以下是所有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;

}

---

尝试向导航包装器添加填充：

---

主要问题是

display:inline消除了正确调整框模型项的能力：边框、边距和填充。您可以使用
显示：内联块以获得您想要的

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

HTML

//使用HTML5语义标记







CSS

正文{
保证金：0；
}
导航{
浮动：对；
}
导航ul{
列表样式：无；
填充：0；
保证金：0；
显示：块；
}
李海军{
显示：内联块；
保证金：0；
}
导航a{
//在内联块父级中，最好的做法是
//对标记应用任何填充，使其单击区域
//用户更容易找到并单击
显示：块；
填充：1em；
}
确实有效，但我希望链接在悬停时具有一定的水平宽度
.navigation-wrapper {
        float: none;
        overflow: visible;
        padding: 2em 0 0 0;
    }

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

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