よろしくお願いします。ソーシャルウィジェットとページリンクを備えたナビゲーションバーを作成しました。そのリスト内の単語とソーシャルウィジェットは、ブラウザーのサイズ変更またはズームイン時に折り返されるのではなく、同じ位置にとどまるようにします。ここで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; }