`<ul>`不是一直在容器中浮动</ul>

Question

所以我以前没见过这个问题，所以我不太清楚该问什么但是.. 我有一个容器内的菜单，我希望它向右浮动，它确实但不是一直，我不知道是什么阻止它。所以我需要一点帮助吗？

我的<ul>像这样浮动：

nav > div div > div > ul.nav {
    position: relative;
    float: right;
    z-index: 6;
}

但我认为这可以在codepen

中看到

Answer 1

问题是.top-bar中的元素太高了。特别是.top-bar .lang。它有一个1px顶部的填充，导致它溢出它的容器。有两种方法可以解决这个问题。

最好的方法是更改​​.top-bar .lang上的填充。

.top-bar .lang {
    padding: 0 10px; // this was 1px 10px 0
    font-size: 9px;
    border-right: solid 1px #2d2d2d;
}

更简单的方法是：

.top-bar .container {
    overflow: hidden;
}

因为这会导致溢出的内容被隐藏。

然后剩下的就是删除div collapse navbar-collapse navbar-ex1-collapse右侧的填充。

Answer 2

您需要进行两项更改 -  在clear: right;中添加ul.nav样式。我正在写更新的CSS -

nav > div div > div > ul.nav {
    position: relative;
    float: right;
    z-index: 6;
    clear: right;
}

另外，添加以下CSS -

.collapse.navbar-collapse.navbar-ex1-collapse {
  padding-right: 0;
}

希望这会有所帮助：）

Answer 3

问题来自以下代码。

 @media (min-width: 1200px)
   .container {
   width: 1170px;
 }

您的上述代码会将width:1170px分配给超过1200px的所有显示器。这意味着如果我在1366px显示器中打开你的代码，我只能看到1170px的容器;

根据您的需要更改您的代码。