响应中心徽标标题与侧面导航

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; 
    }