Question

我很困惑，为什么当窗户水平收缩时它会坍塌？我试图设置div的宽度并尝试设置display:block。我正在使用Bootstrap 3，但我认为它不相关。

h1 {
font-family: 'LatoBold';
color: #ff990f;
}
/*----------------------------------  Header  ----------------------------*/
    #header {
        position: relative;
        margin-bottom: 1em;
        min-width: 100ex;
        white-space: nowrap;
    }

    #header > .inner {
        height: 95px;
    }

    /* njnavbar
    ************************************/
    #header .njnavbar {
        position: absolute;
        bottom: 0px;
        right: 0px;
        height: 42px;
        min-width: 90ex;
        white-space: nowrap;
    }

    #header .njnavbar * {
        font-family: 'LatoBlack', Arial, Verdana, sans-serif;
        font-size: 16px;
        color: #FFF;
        text-transform: uppercase;
        text-shadow: #08121b 0px 1px 1px;
    }

    #header .njnavbar ul {
        margin-right: 15ex;
    }
    #header .njnavbar ul li {
        float: left;
        line-height: 42px;
        margin: 0 10px;
        list-style: none;
    }

    #header .njnavbar ul li.last {
        margin-right: 0!important;
    }

    #header .njnavbar > ul > li > a:hover {
        color: #e5ca38;
    }

    /* Phone Number
    ************************************/
    #header .phone {
        position: absolute;
        top: 1ex;
        margin-top: .5ex;
        right: 10px;
        padding-left: 30px;
        height: 26px;
        line-height: 26px;
        font-size: 18px;
    }

    #header .phone strong {
        font-family: 'LatoBlack';
    }

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
            <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <title>example.COM</title>

        <!-- Bootstrap -->
        <link href="./assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" href="css/fonts.css" type="text/css" />
        <link rel="stylesheet" href="assets/css/login.css" type="text/css" />
      </head>

      <body>
        <div id="header"><div class="inner">
        <h1>example.COM</h1>
          <div class="phone">
            For reservations call <strong>888-555-1212</strong> | <strong>888-555-1213</strong>
          </div>
          <div class="njnavbar" style="min-width:90ex">
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="services.html">Services</a></li>
                <li><a href="longer_asdfchoiceasd.html">longer choiceasdf</a></li>
                <li><a href="#">Customers</a></li>
                <li class="last"><a href="contact.html">Contact</a></li>
            </ul>
          </div> <!-- /njnavbar -->
        </div></div> <!-- /inner /#header -->
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="./assets/bootstrap/js/bootstrap.min.js"></script>
      </body>
    </html>

Answer 1

问题似乎与float属性有关。

#header .njnavbar ul li {
    float: left; /*remove this*/
    display: inline-block; /*add this*/
}

然后父容器上的white-space: nowrap;将开始正常工作。

另外要注意ex单位，它很少使用，除非你知道你在做什么。

如何保持最后一个导航项始终保持一致？

1 个答案: