響應中心徽標標題與側面導航

Question

我正在嘗試創建一個響應中心徽標標題與側面導航。因爲我想讓它響應，所以沒有固定的寬度，這很難完成居中（margin：auto）。隨着窗戶變小，我希望li標籤能夠坐在彼此的頂部。我不想浮動左側，並且將側面導航浮動，因爲我希望它們被連接到徽標的兩側，而不是窗口的兩側，左右兩側的徽標和菜單之間具有相同的空間。

HTML：

<div id="header"> 
    <div id="nav"> 
     <div id="nav-inner"> 

     <ul id="site_nav_1"> 
      <li id="menu-item"> 
    The Problem 
      </li> 
      <li id="menu-item"> 
    Why Sanitize 
      </li> 
     </ul> 

     <div id="logo-nav"> 
       <div id="logo"></div> 
     </div> 

     <ul id="site_nav_2"> 
      <li id="menu-item"> 
    About Us 
      <li id="menu-item"> 
    Sanitize Now! 
      </li> 
     </ul> 

     </div> 
    </div> 
</div> 

http://jsfiddle.net/7PhJZ/74/

Answer 1

您需要使用媒體查詢，並設置根據斷點不同的風格。我會首先建議移動。

在http://jsfiddle.net/7CcjD/上很粗糙的小提琴 - 嘗試改變結果框的寬度。

<div id="header"> 
    <div class="menu-1">Menu 1</div> 
    <div class="logo">Logo</div> 
    <div class="menu-2">Menu 2</div> 
</div> 


div {border: 1px solid #999} 

.menu-1 {border-color: red} 
.logo {border-color: green} 
.menu-2 {border-color: blue} 

.menu-1, .logo, .menu-2 { 
    margin: 1em auto; 
    width: 80% 
} 

#header {text-align: center;} 

@media only screen and (min-width: 640px) { 
    .menu-1, .logo, .menu-2 { 
     border-width: 2px; 
     width: 20%; 
     display: inline-block; 
    } 
} 

Answer 2

你可以使用inline-block的，而不是floatting： http://jsfiddle.net/7PhJZ/75/

#nav { 
     margin:auto; 
     display: block; 
     border: 1px solid green; 
    } 
    #nav-inner { 
     max-width:810px; 
     height:200px; 
     margin:auto; 
     display: block; 
     border: 1px solid grey; 
     white-space:nowrap;/* keep them on one line */ 
    } 
    #header { 
     position: fixed !important; 
     overflow: visible;/* auto if fixed would be wised somehow */ 
     padding: 0px; 
     width: 100%; 
     top: 0; 
     left:0; 
     border: 1px solid purple; 
    } 
    #logo-nav { 
     display: inline-block; 
    } 
    #logo { 
     border: 1px solid blue; 
     margin: 0px auto 0px auto; 
     width: 225px; 
     height: 124px; 
    } 
    ul#site_nav_1 { 
     display:inline-block; 
     border: 1px solid red; 
     text-align:right; 
     max-width:32%; 
    } 
    ul#site_nav_2 { 
     display:inline-block; 
     border: 1px solid red; 
     text-align:left; 
     max-width:29%; 
    } 
    li#menu-item { 
     display:inline-block; 
     padding:20px; 
     text-align: center; 
    } 
    a { 
     font-family:'gobold_boldregular'; 
     font-size:25px; 
     text-transform:uppercase; 
     letter-spacing: 1px; 
     text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3); 
    } 
/* some reset */ 
    #logo-nav, #site_nav_1, #site_nav_2 { 
     vertical-align:middle; 
    } 

    ul, li { 
     padding:0; 
     margin:0; 
     white-space:normal; 
    }