使元素保持在相同位置而不包裹

Question

提前感谢您的帮助。我创建了一个导航栏，其中包含社交窗口小部件和页面链接。我希望该列表中的单词和社交小部件保持在相同的位置，而不是在浏览器调整大小或放大时进行换行。您可以在此处参考JSfiddle。 http://jsfiddle.net/kadeemlaurie/KGwWV/

这是HTML：

 <div id="header-menu-wrap"> 
 <div id="header-menu">
 <div id="header-menu-items">
 <span class="menu-item-fake"></span>

  <a class="menu-item active" href="/">
   <span class="mi-wrap">
    <span class="hmi-label">+Home</span>  
     <span class="mi-arrow"></span></span></a>

  <a class="menu-item active" href="/">
   <span class="mi-wrap">
    <span class="hmi-label">Blog</span>  
     <span class="mi-arrow"></span>
      </span>
       </a>

  <div class="menu-item">
   <span class="mi-wrap">
    <span class="home-icon" data-icon="D"></span>
    <span class="hmi-label">Events</span>  
    <span class="mi-arrow"></span></span>

  <div class="submenu-item">
   <div class="submenu-content">
    <span class="submenu-hit-area"></span>
    <canvas class="submenu-triangle" width="20" height="11"></canvas>
    <ul class="drop-menu-list">

  <li>
   <a class="parent-category-lnk" href="/category/css">Maison X IESOGEN</a>
    </li>
     </ul>
      </div></div></div>

  <a class="menu-item" href="/category/freebies">
   <span class="mi-wrap">
    <span class="home-icon" data-icon="o"></span>
     <span class="hmi-label">About</span></span>
      </a>


 <span class="menu-item-fake"></span></div></form></div>      

  <div id="header-socials">
   <span id="share-post-label">Share: </span>
    <span class="fb-home-btn" style="width: 80px;">

  <a class="fb-stub" href="#" target="_blank" 
   data-shares="100" send="false" layout="button_count" width="70"  
   show_faces="true">Like

 <span class="fb-stub-arr"></span></a></span>
 <span class="twitter-home-btn">

 <a data-shares="90" class="tw-stub" style="margin-right:45px" href="#"     
 target="_blank">Tweet>

 <span class="tw-stub-ico"></span> <span class="tw-stub-arr"></span></a></span>
 </div></div>

这是CSS：

  margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px
    }

    .rounded{
      -moz-border-radius: 4px; /* Firefox */
      -webkit-border-radius: 4px; /* Safari, Chrome */
      border-radius: 4px; /* CSS3 */
      behavior: url(border-radius.htc);}

    .border{border:solid px;}
    .dark{border-color:#000;}
    .olive{background-color:#fff;}

    html, body, div, span, applet, object, iframe,
    h1, h2,fo h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td, tr {

     margin: 0;
     padding: 0;
     border: none;
     outline: 0;
     font-size: 100%;
     vertical-align: baseline;
     background: transparent;
     text-decoration: none;}

    body {font-family:Helvetica, Arial, sans-serif; color:#000; 
    font-size:13px; position:absolute; width:100%; left:0; top:0; min-height:100%;
    line-height: 16px;
    background:#232323;}

    h1{ font-size:13px;  font-weight:bold; font-family: 'Arial', 'helvetica' 'sans-serif';}


    #header-socials { float:right; margin:9px 160px 0 0 ;}
    #share-post-label { height:auto;  margin:0px 5px 0 0; position:relative; top:2px; } 
    #header-socials span {vertical-align:middle; display:inline-block;        
    height:21px;color:fff;}


    #nav-bar-close-link { position:absolute;  
    top:8px; right:20px; 
    font-size:28px; text-decoration:none;
    line-height:28px;
    display:none;
    color:#666;}

    #nav-bar-close-link:hover {text-decoration:none; color:#999;}

    #header-wrap {height:302px; }
    #header-menu-wrap {background: #232323; height:30px;  position:fixed; z-index:20;   
    width:100%; font-family:Arial, Helvetica, sans-serif; font-size:12px;}

    #header-menu-wrap:hover {overflow:visible;} #header-menu {margin:0 auto; 
    max-width:1284px; font-weight:bold; font-size:13px; font-family:Arial, Helvetica, 
    sans-serif;}

    .header-menu-section { position:relative; margin-right:20px; height:30px;       
    display:block; float:left; text-align:center; /*border-right:1px solid #999;*/
    z-index:7;}

    #main-menu-select { display:none;}
    #mbl-wrap { display:none;}
    #header-menu-items {margin: -4 0 0 121;}
    #header-menu .menu-item:hover {text-decoration:none;  }

    #header-menu .menu-item:hover .mi-wrap{
    text-decoration:none;
    color:#fff;     font-family:Arial, Helvetica, sans-serif;}

    #header-menu .menu-item, .menu-item-fake {
    display: inline-block; height:30px; padding:0px 15px; float:left;
    color: #ccc; position:relative; z-index:auto;}

   .submenu-item {position:absolute; top:-9999px; left:0px; z-index:1;}

    a.parent-category-lnk {color:#ccc; font-size:14px; display:block;  padding:8px 20px; 
    white-space:nowrap;}
   .submenu-item li { display:block; border-bottom:1px solid #4C4C4C; }
   .submenu-item li:last-child { border:none;}
   .submenu-item li:hover { background:#4C4C4C; text-shadow: 0 -1px 1px black;}


   .mi-wrap {
    vertical-align:middle;
    text-decoration: none;
    position:relative; 
    z-index:auto;
    top:10px;    font-family:Arial, Helvetica, sans-serif;
    color:#ccc; text-shadow: 0 -1px 1px #000;}


    .mi-arrow { font-size:8px; vertical-align:middle; position:relative; top:0px;}

    .menu-item-fake:first-child {border-left:none; padding:0;}
    .menu-item-fake:last-child {border-right:none;  padding-right:0;}

    #md-deal-wdd-block #md-large-widget-content, #md-deal-wdd-block {text-align:center;     
    position:relative;}


    #header-content-wrap {margin:0 auto; height:108px;  position:relative; background: 
    url(http://netdna.webdesignerdepot.com/themes/wdd_new/css-images/head-tile.png);}
    #header-content {position:relative; z-index:2;
    margin: 0 auto;
    width: 1140px;}

    #header-socials #___plusone_0{ width:70px !important; }
#header-socials .fb-home-btn { margin-right:5px;}

@media screen and (max-width: 878px)  {
  #header-socials {display:none;}
}

@media screen and (max-width: 1376px)  {
  #top_link { display:none !important;}
  #nav-bar-close-link { right:5px;}
}

@media screen and (max-width: 1342px)  {
 #nav-bar-close-link { display:none !important;}
}


@media screen and (max-width: 1164px)  {
  #nav-bar-close-link { display:none !important;}
}

@media screen and (max-width: 620px) {
#header-wrap { /*height:100px;*/ height:55px; position:relative; width:100%; overflow:hidden;}

   #header-menu { text-align:center;}



    #header-menu-items { display:none;}


}

 /* SOCIAL WIDGETS STUBS */
.fb-stub {

-webkit-border-radius: 3px;
border: 1px solid #CAD4E7;
cursor: pointer;
white-space: nowrap;
color: #3B5998 !important;
padding: 1px 5px 1px 20px;
display: inline-block;
font-size:11px;
font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
font-weight:normal !important;
background:#ECEEF5 url('http://static.ak.fbcdn.net/rsrc.php/v2/yI/x/1dQf_ATK831.png') no-repeat 4px 2px;
position: relative;
margin-right:28px;
}    


.fb-stub:hover { border-color:#9DACCE; text-decoration: none !important;}

.fb-stub::before, .tw-stub::before {
  content: attr(data-shares);
  background: white;
  border: 1px solid #C1C1C1;
  color:#333 !important;
  display: inline-block;
  height: 14px;
  line-height: 14px;
  margin-left: 6px;
  min-width: 15px;
  padding: 1px 2px;
  text-align: center;
  white-space: nowrap;
  position: absolute;
  top:0;
  left:100%;
  cursor:default;
}   


.fb-stub-arr, .tw-stub-arr {
border-collapse: collapse;
 border-spacing: 0;

 position: absolute;
 border-color: transparent #D7D7D7 transparent;
 border-style: solid;
 border-width: 4px 5px 4px 0;
 display: block;
 top:5px; left:100%;

 margin-left:2px;
 height:0px !important;

}

.tw-stub-arr::after,
.fb-stub-arr::after{
  content:'';
 border-color: transparent #D7D7D7 transparent;
 border-right-color: white;
border-style: solid;
border-width: 4px 5px 4px 0;
display: block;
position: absolute;
left:2px;
top:-4px;
}


.tw-stub {
  margin-right: 20px;
  max-width: 100%;
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: bottom;
  zoom: 1;
  white-space: nowrap;
  text-align: left;

  position: relative;
background-color: #F8F8F8;
background-image: -webkit-gradient(linear,left top,left bottom,from(white),to(#DEDEDE));
background-image: -moz-linear-gradient(top,white,#DEDEDE);
background-image: -o-linear-gradient(top,white,#DEDEDE);
background-image: -ms-linear-gradient(top,white,#DEDEDE);
background-image: linear-gradient(top,white,#DEDEDE);
border: #CCC solid 1px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;

text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
cursor: pointer;

font: normal normal normal 11px/18px 'Helvetica Neue',Arial,sans-serif;
color: #333;
font-weight: bold;
padding:0px 5px 0px 20px;

}

.tw-stub:hover, .tw-stub:active {
  text-decoration: none !important;
border-color: #BBB;
background-color: #F8F8F8;
background-image: -webkit-gradient(linear,left top,left bottom,from(#F8F8F8),to(#D9D9D9));
background-image: -moz-linear-gradient(top,#F8F8F8,#D9D9D9);
background-image: -o-linear-gradient(top,#F8F8F8,#D9D9D9);
background-image: -ms-linear-gradient(top,#F8F8F8,#D9D9D9);
background-image: linear-gradient(top,#F8F8F8,#D9D9D9);
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;}

.tw-stub::before{
background: white;
border: #BBB solid 1px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
min-width: 8px;
font-weight: normal;
}

.twitter-btn-wrap .tw-stub::before { display:none;}
.twitter-btn-wrap .tw-stub {margin-right:0;} 

.tw-stub-ico{
  width:16px; height:13px;
  position: absolute;
  top:50%;
  margin-top:-5px;
  left:2px;
  background: url('http://platform.twitter.com/widgets/images/btn.27237bab4db188ca749164efd38861b0.png') no-repeat 0px 0px;
}



/*one column here*/

#container
{
    margin: auto;
    width: 75%;
    background:#fff;
    height:900;
}

#header
{
    background:#fff;
    padding: 10px;
}

#header h1 { margin: 0; }

Answer 1

使用inline-block：

.cntranav ul{
  white-space: nowrap;    
}

.cntranav li{
  display: inline-block;
}

Demo

或者将overflow: hidden添加到ul。注意这种技术，不适合的元素消失而不是显示一半。

Demo

但是，我也不建议。允许换行或使用@media查询，以确保无论视口有多小，导航始终都可见。