Question

我正在尝试使用侧面导航创建响应式居中徽标标题。因为我希望它具有响应性，所以没有固定宽度，这使得难以实现居中（边距：自动）。随着窗口变小，我希望li标签能够相互搭配。我不想向左浮动并向右侧浮动导航，因为我希望它们可以连接到徽标的两侧而不是窗口的两侧，左右两侧的徽标和菜单之间的空间相同。 / p>

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

你可以使用内联块代替浮动： 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;
    }

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

2 个答案: