Question

我在加载了bootstrap的HTML文件中有以下简单的导航栏：

<div class="nav-bar">
            <div class="container">
                <ul style="float:left">

                    <li><a target="_blank" href="http://stores.ebay.com/doboyo_Womens-Fashion_W0QQfsubZ5511742012">women's</a></li>
                    <li><a target="_blank" href="http://stores.ebay.com/doboyo_Mens-Fashion_W0QQfsubZ5511743012">men's</a></li>
                    <li><a target="_blank" href="http://stores.ebay.com/doboyo_Youth-Fashion_W0QQfsubZ5511744012">youth</a></li>
                    <li><a target="_blank" href="http://stores.ebay.com/doboyo_Baby_W0QQfsubZ5511745012">baby</a></li>

                </ul>
                <ul style="float:right">
                    <li><a target="_blank" href="http://stores.ebay.com/doboyo">STORE HOME</a></li>             
                </ul>
            </div>
        </div>

使用以下CSS：

.listing-template .nav-bar {
    width:748px;
}

.listing-template .nav-bar ul {
    padding-left: 2px;
    padding-right: 5px;
}

.listing-template .nav-bar a {
    color: #D7E3E9;
    font-family: oswald, sans-serif;
    font-size: 14px;
    font-weight: 300;
    padding: 8px;
    text-transform: uppercase;
}

.listing-template .nav-bar li {
    display:inline-block;
    padding-top: 10px;
    padding-bottom: 10px;
    border: 1px solid #D7E3E9;
}

我的问题是，向右浮动的元素是浮动的，通过包含DIV一直到页面的边缘。如何在其div中保留float：right元素？我需要先清除浮子吗？

Answer 1

您正在使用具有固定宽度的类container，它会破坏您的实际布局：

来自Bootstrap CSS：

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

如果删除它，则div将100% width，并且浮动将按预期工作。

Answer 2

如果您想在导航上放置背景，请查看此解决方案。

＆＃13;

.container
{
    width: 748px;
    background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQCWVb54xv1i3ncYe1MCKY4vt9y7AdDMiCvthGjPTAXFJEzjjoy8w");
  background-repeat: no-repeat;
  background-size: cover;
}

.leftContainer
{
    width: 200px;
}

.rightContainer
{
    width: 200px;
}

.listing-template .nav-bar 
{
    width:748px;
}

.listing-template .nav-bar ul 
{
    padding-left: 2px;
    padding-right: 5px;
}

.listing-template .nav-bar a 
{
    color: #D7E3E9;
    font-family: oswald, sans-serif;
    font-size: 14px;
    font-weight: 300;
    padding: 8px;
    text-transform: uppercase;
}

.listing-template .nav-bar li 
{
    display:inline-block;
    padding-top: 10px;
    padding-bottom: 10px;
    border: 1px solid #D7E3E9;
}

.clear
{
    clear: both;
}

＆＃13;

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="nav-bar">
            <div class="container">
                <div class="leftContainer pull-left">
                    <ul>
                        <li><a target="_blank" href="http://stores.ebay.com/doboyo_Womens-Fashion_W0QQfsubZ5511742012">women's</a></li>
                        <li><a target="_blank" href="http://stores.ebay.com/doboyo_Mens-Fashion_W0QQfsubZ5511743012">men's</a></li>
                        <li><a target="_blank" href="http://stores.ebay.com/doboyo_Youth-Fashion_W0QQfsubZ5511744012">youth</a></li>
                        <li><a target="_blank" href="http://stores.ebay.com/doboyo_Baby_W0QQfsubZ5511745012">baby</a></li>
                    </ul>
                </div>
                <div class="rightContainer pull-left">
                    <ul>
                         <li><a target="_blank" href="http://stores.ebay.com/doboyo">STORE HOME</a></li>             
                    </ul>
                </div>
            </div>
        </div>

＆＃13;

这意味着您不必更改容器的整体大小，如果容器是所有元素的父容器，这样做可能会影响页面的整体宽度。

Daniel提到了可以根据视口大小调整css的媒体查询。这些非常方便。

我的.float：右边元素浮动它包含DIV

2 个答案: