html - How to keep the last nav item to always stay in line? -


i'm confused, why collapses when window shrinks horizontally? i've tried set width of div , tried setting display:block. i'm using bootstrap 3, don't think relevant.

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">              <!-- above 3 meta tags *must* come first in head; 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">              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 bootstrap's javascript plugins) -->          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>          <!-- include compiled plugins (below), or include individual files needed -->          <script src="./assets/bootstrap/js/bootstrap.min.js"></script>        </body>      </html>

problem seems related float property.

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

then white-space: nowrap; on parent container start work properly.

also aware of ex units, it's used, unless know you're doing.


-

Comments

Post a Comment

Popular posts from this blog

What Are The Best Universities In The World?

Harvard and Yale are often referred to as “the best of the best”. But when it comes to the highest ranked universities, these and other Ivy League schools don't even make it into the top five. So what are the world's best universities? Well, according to an index by the Times Higher Education, Stanford ranks 3rd in the world. Most people associate Stanford with tech-capital Silicon Valley, which is where the school is located. And in fact, it's largely because of Stanford that the region is now the global capital of entrepreneurship and technology. In the 1940's and 50's the university heavily encouraged students and faculty to start their own companies, eventually leading to companies like Google and Snapchat. And still today, the school is known to produce some of the most successful entrepreneurs. A Stanford degree is in extremely high demand, and the school maintains the lowest acceptance rate in the country, admitting less than 5 percent of applicants. Much ...
Read more

Hard vs. Soft Water: What's The Difference?

Hard or Soft? HOW AM I SUPPOSED TO KNOW? THEY BOTH LOOK EXACTLY THE SAME! Hey there, Sapna here for Dnews. From the outside, all water is seemingly the same: clear, mostly flavorless, two hydrogens, one oxygen. But once you get past the basics, water is actually pretty versatile. It can be distilled, filtered, tap, bottled, and if you're real fancy, there's water marketed as kosher, organic or kabbalah. But did you know water can also be hard or soft? No, this isn't to describe how the water actually feels. It actually has to do with its mineral content. Water becomes ‘hard' when it has a higher than normal concentration of minerals, primarily calcium and magnesium. Water picks up these minerals from rocks and soil as it flows through rivers, wells or other waterways. Soft water, on the other hand, has a low mineral content, either because it has not yet flowed through rocks or wells - like rain water - or because the rocks it has come in contact with have little to no...
Read more

java - Solr query version issue: Invalid version or the data in not in 'javabin' format -

as part of recent project, our solr search engine upgraded 5.0.0. program runs client works fine in production/qa, when run on local system, error message: caused by: java.lang.runtimeexception: invalid version or data in not in 'javabin' format @ org.apache.solr.common.util.javabincodec.unmarshal(javabincodec.java:99) this exception apache-solr-solrj-1.4.1.jar, would've thought needs replaced. when check (running) production code, same jar file there. however, java version on production server has been upgraded java version "1.7.0_79". on local system, i'm pointing @ 1.6 jre sts/eclipse. if change 1.7, start getting 51 vs. 50 class version error in different part of program, indicating there's issue converting 1.7, although again doesn't seem problem on production server. i have tested solr server running correctly via web client. returns data in json format. one question have is, mean when says "invalid version or data isn'...
Read more