html - float li 组件并保持 ul 边框

Question

以下代码是我用来在页面顶部设置和显示导航栏的代码。但是，不同的 li 元素之间存在线条。

* {
  padding: 0;
  margin: 0;
}

.top-nav.fixed {
  float: right;
  position: relative;
  right: 50%;
  /* or right 50% */
  text-align: left;
}
.top-nav.fixed ul {
  background: blue;
  margin-top: 10px;
  position: relative;
  left: 50%;
  border-style: solid;
  border-width: 3px;
  border-color: blue;
}
.top-nav.fixed li {
  display: inline-block;
  background: red;
}
.top-nav.fixed a {
  display: block;
  padding: 10px;
}
.top-nav ul {
  list-style: none;
}
.top-nav a {
  text-decoration: none;
}

<nav class="top-nav fixed" role="navigation">
  <ul>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
  </ul>
</nav>

为了解决这个问题，我将代码更改为以下内容。

.top-nav.fixed li {
  display: inline-block;
  float: left;
  background: red;
}

这带来了一个新问题。 ul 边框不再环绕 li 元素。我的问题;如何让 ul 边框环绕所有 li 元素，就像它们在 float 之前一样？

* {
  padding: 0;
  margin: 0;
}

.top-nav.fixed {
  float: right;
  position: relative;
  right: 50%;
  /* or right 50% */
  text-align: left;
}
.top-nav.fixed ul {
  background: blue;
  margin-top: 10px;
  position: relative;
  left: 50%;
  border-style: solid;
  border-width: 3px;
  border-color: blue;
}
.top-nav.fixed li {
  display: inline-block;
  float: left;
  background: red;
}
.top-nav.fixed a {
  display: block;
  padding: 10px;
}
.top-nav ul {
  list-style: none;
}
.top-nav a {
  text-decoration: none;
}

<nav class="top-nav fixed" role="navigation">
  <ul>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
  </ul>
</nav>

Answer 1

对父级使用overflow: hidden。

在你的情况下，

.top-nav.fixed ul {
  overflow: hidden;
}

这应该有所帮助。

此外，删除 inline-block，当您使用 float 时，它在您的代码中不再有用。