Question

以下代码用于设置样式并在页面顶部显示导航栏。但是，不同的* { 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; }元素之间存在一些行。

＆＃13;

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

＆＃13;

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

＆＃13;

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

ul

这带来了一个新问题。 li边框不再围绕ul元素。我的问题;你如何让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; float: left; background: red; } .top-nav.fixed a { display: block; padding: 10px; } .top-nav ul { list-style: none; } .top-nav a { text-decoration: none; }元素，就像它们浮动之前一样？

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

Answer 1

将overflow: hidden用于父级。

在你的情况下，

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

这应该有所帮助。

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

浮动li组件并保持ul边界

1 个答案: