ロゴ、ナビゲーション、ソーシャルアイコンを一列に並べる

Question

ロゴ、ナビゲーションリンク、ソーシャルアイコンを一列に整列しようとしています。私は自分のページにブートストラップとカスタムCSSのスタイリングを使っています。

HTML：

<header id="header-main"> 
    <div id="site-header"> 
    <div class="container"> 
     <div class="row"> 
     <div class="col-sm-12"> 
      <div id="site-logo"> 
      <a href="www.google.com"><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="" /></a> 
      </div> 
      <div class="social-set"> 
      <a href="https://www.facebook.com" target="_blank"> 
       <li class="fa fa-facebook"></li> 
      </a> 
      </div> 
      <!-- end social-set --> 
      <nav id="nav"> 
      <div class="menu-main-container"> 
       <ul id="menu-main" class="menu"> 
       <li id="menu-item-47" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-33 current_page_item menu-item-47"><a href="http://www.website.com/">Home</a></li> 
       </ul> 
      </div> 
      </nav> 
     </div> 
     <!-- .col-sm-12 --> 
     </div> 
     <!-- .row --> 
    </div> 
    <!-- .container --> 
    </div> 
    <!-- .site-header --> 

はCSS：

#header-main { 
    width: 100%; 
    margin: 0 0 9px 0; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 100; 
} 

#site-header { 
    max-width: 1280px; 
    margin: 0 auto; 
    background: #fff; 
    position: relative; 
} 

#site-logo { 
    margin: 0; 
    padding: 0; 
    line-height: 1em; 
    position: relative; 
    font-weight: 900; 
    font-size: 2em; 
    z-index: 999; 
    display: inline-block; 
} 

.social-set ul { 
    margin: 6px 0 0 !important; 
    padding: 0; 
    display: inline; 
} 

.social-set ul li { 
    padding: 0 2px 5px 0; 
    margin: 0; 
    display: inline-block; 
    border: none !important; 
    clear: none; 
    line-height: 100%; 
} 

.social-set li img { 
    vertical-align: middle; 
    margin-top: -3px; 
} 

#nav { 
    max-height: 100px; 
    overflow: hidden; 
} 

#nav ul { 
    margin: 0 0 30px 0; 
    text-align: center; 
} 

#nav ul { 
    margin: 0 0 30px 0; 
    text-align: center; 
} 

#nav li { 
    padding: 0 16px; 
    font: 400 18px/13px 'Open Sans', sans-serif; 
    display: inline-block; 
    text-transform: uppercase; 
} 

.social-set { 
    float: right; 
    margin-bottom: 10px; 
} 

私は固定位置にし、1行にロゴを設定するためにposition: absoluteを使用することができますが、私はposition relativeを使用して、それ自体を調整したいと思いますナビゲーションやソーシャルアイコンのリンク数に応じて1行に表示されます。ロゴにそれらを設定するデモで

JSFiddle demo

Answer 1

socialおよびnav要素は、display: inline-blockプロパティが必要です。同様に、と垂直整列と行の高さと同じ行に整列させることができます。

フィドル：https://jsfiddle.net/xs364op0/14/

Answer 2

使用display:inline-block; float: left;は、ロゴのためにOK働きました。その後、display:inline-block;のナビとソーシャルリンクは、ロゴの高さに等しいline-heightに設定されます。

Answer 3

この問題を解決する方法はほとんど例..

This linkはあなたにインライン対ブロックの違いについての詳細を学びます。

/*div > div : div child of div*/ 
 
div > div { 
 
    display: inline-block; 
 
}

<div> 
 
    <div><img src="http://lorempixel.com/50/50/"> 
 
    </div> 
 
    <div><img src="http://lorempixel.com/50/50/"> 
 
    </div> 
 
    <div><img src="http://lorempixel.com/50/50/"> 
 
    </div> 
 
    <div><img src="http://lorempixel.com/50/50/"> 
 
    </div> 
 
    <div><img src="http://lorempixel.com/50/50/"> 
 
    </div> 
 
</div>

編集：'最後の部分は、' '次の行'

#header-main { 
 
    margin: 0 0 9px 0; 
 
} 
 
#site-header { 
 
    max-width: 1280px; 
 
    margin: 0 auto; 
 
    background: #fff; 
 
} 
 
#site-logo { 
 
    margin: 0; 
 
    padding: 0; 
 
    line-height: 1em; 
 
    font-weight: 900; 
 
    font-size: 2em; 
 
    display: inline-block; 
 
} 
 
.social-set ul { 
 
    margin: 6px 0 0 !important; 
 
    padding: 0; 
 
    display: inline; 
 
} 
 
.social-set ul li { 
 
    padding: 0 2px 5px 0; 
 
    margin: 0; 
 
    display: inline-block; 
 
    border: none !important; 
 
    clear: none; 
 
} 
 
.social-set { 
 
    display: inline-block; 
 
} 
 
.social-set li img { 
 
    vertical-align: middle; 
 
    margin-top: -3px; 
 
} 
 
#nav { 
 
    max-height: 100px; 
 
    overflow: hidden; 
 
    display: inline-block; 
 
} 
 
#nav ul { 
 
    margin: 0 0 30px 0; 
 
    text-align: center; 
 
} 
 
#nav ul { 
 
    margin: 0 0 30px 0; 
 
    text-align: center; 
 
} 
 
#nav li { 
 
    padding: 0 16px; 
 
    font: 400 18px/13px'Open Sans', sans-serif; 
 
    display: inline-block; 
 
    text-transform: uppercase; 
 
} 
 
.social-set { 
 
    margin-bottom: 10px; 
 
}

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<header id="header-main"> 
 
    <div id="site-header"> 
 
    <div class="container-fluid"> 
 
     <div class="row"> 
 
     <div class="col-sm-12"> 
 
      <div id="site-logo"> 
 
      <a href="www.google.com"> 
 
       <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="" /> 
 
      </a> 
 
      </div> 
 
      <div class="social-set"> 
 
      <a href="https://www.facebook.com" target="_blank"> 
 
       <li class="fa fa-facebook"></li> 
 
      </a> 
 
      <a href="https://www.facebook.com" target="_blank"> 
 
       <li class="fa fa-facebook"></li> 
 
      </a> 
 
      <a href="https://www.facebook.com" target="_blank"> 
 
       <li class="fa fa-facebook"></li> 
 
      </a> 
 
      <a href="https://www.facebook.com" target="_blank"> 
 
       <li class="fa fa-facebook"></li> 
 
      </a> 
 
      </div> 
 
      <!-- end social-set --> 
 
      <nav id="nav"> 
 
      <div class="menu-main-container"> 
 
       <ul id="menu-main" class="menu"> 
 
       <li id="menu-item-47" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-33 current_page_item menu-item-47"><a href="http://www.website.com/">Home</a> 
 
       </li> 
 
       <li id="menu-item-47" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-33 current_page_item menu-item-47"><a href="http://www.website.com/">Home</a> 
 
       </li> 
 
       <li id="menu-item-47" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-33 current_page_item menu-item-47"><a href="http://www.website.com/">Home</a> 
 
       </li> 
 
       <li id="menu-item-47" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-33 current_page_item menu-item-47"><a href="http://www.website.com/">Home</a> 
 
       </li> 
 
       </ul> 
 
      </div> 
 
      </nav> 
 
     </div> 
 
     <!-- .col-sm-12 --> 
 
     </div> 
 
     <!-- .row --> 
 
    </div> 
 
    <!-- .container --> 
 
    </div> 
 
    <!-- .site-header -->

に壊れいっぱいにする場合は、この1行にそれらを作ります