Question

编码当设备大小达到1024时出现的菜单，以替换上一个菜单。问题是它没有水平对齐，但菜单选项垂直堆叠在一起。不幸的是该网站不在线。

但这是基本代码，因为它是一个非常简单的菜单布局

HTML：的的

的
 <div class="menu_scaled_wrapper"> <div class="menu_scaled"> <nav ul> <li><a href="index.html#home" class="smoothScroll">HOME</a></li> <li><a href="#portfolio" class="smoothScroll">PORTFOLIO</a></li> <li><a href="contact.html">CONTACT</a></li> </nav> </div> </div>

的 CSS：的的

的
/*----------------------------Menu 2----------------------------*/ .menu_scaled_wrapper{ display:none; top: 0; left: 0; background: #f6f6f6; background: rgba(0,0,0,.6); position:fixed; height:80px; width:100%; z-index:5000; overflow: hidden; -webkit-transition: height 0.3s; -moz-transition: height 0.3s; transition: height 0.3s; -moz-box-shadow: -2px 5px 10px 0px #000; -webkit-box-shadow: -2px 5px 10px 0px #000; box-shadow: -2px 5px 10px 0px #000; z-index:5000; } .menu_scaled{ position:relative; width:100%; height:100%; } .menu_scaled nav{ list-style:none; margin:4% 50%; } .menu_scaled nav a{ color: #aaa; font-weight: 700; font-size: 1em; } .menu_scaled nav a:hover { color:#900; transition:0.5s; } /*---------------------------- Menu Scaling ----------------------------*/ @media screen and (max-width: 1024px){ .cbp-af-header{ display:none; } .menu_scaled_wrapper{ display:inline-block; } .faderwrap{ margin-top:80px; } }

的

Answer 1

我相信你正在寻找这样的东西。

＆＃13;

/*----------------------------Menu 2----------------------------*/
.menu_scaled_wrapper{
    display:none;
    background: #f6f6f6;
    background: rgba(0,0,0,.6);
    position:fixed;
    height:80px;
    width:100%;
    z-index:5000;
    overflow: hidden;
    -webkit-transition: height 0.3s;
    -moz-transition: height 0.3s;
    transition: height 0.3s;
    -moz-box-shadow: -2px 5px 10px 0px #000;
    -webkit-box-shadow: -2px 5px 10px 0px #000;
    box-shadow: -2px 5px 10px 0px #000;
    z-index:5000;
}

nav ul {
  display: block;
  width: 50%;
  text-align: center;
  list-style: none;
  padding: 0;
  margin: 0;
  margin-left: auto;
  margin-right: auto;
  line-height: 80px;
}

li {
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
}
nav a {
    color: #aaa;
    font-weight: 700;
    font-size: 1em;
}
nav a:hover {
    color:#900;
    transition:0.5s;
}
/*---------------------------- Menu Scaling ----------------------------*/

@media screen and (min-width: 1024px){
    .cbp-af-header{
        display: none;
    }
    .menu_scaled_wrapper {
        display: inline-block;
    }
}

＆＃13;

    <!--===================================================2nd Menu===================================================!-->
<div class="menu_scaled_wrapper">
  <nav>
    <ul>
      <li><a href="index.html#home" class="smoothScroll">HOME</a></li>
      <li><a href="#portfolio" class="smoothScroll">PORTFOLIO</a></li>
      <li><a href="contact.html">CONTACT</a></li>
    </ul>
  </nav>
</div>

＆＃13;

您可以在此处查看演示http://codepen.io/johnweland/pen/EVvodq。我尝试尽可能少地改变你的代码时这样做，因为我不知道你有什么依赖。我看到的最大问题是你的利润率为4％50％。这打破了您的布局，使其无法显示内联。

此外，如果你不需要很多传统的浏览器支持，你可以查看CSS3 flex-box，我认为这是一个天赐之物。因为它可以很容易地以各种方式对齐项目。您可以在Mozilla Developer Network上阅读。

Answer 2

您需要将inline-block样式应用于每个列表元素，而不是其中一个父元素。这是因为display不是继承属性，因此子元素不会仅仅因为他们的父母而显示为inline-block。

试试这个：

@media screen and (max-width: 1024px){
    .cbp-af-header{
        display:none;
    }
    /* This selector is the change! It targets the individual list items */
    .menu_scaled_wrapper > .menu_scaled > ul > li {
        display:inline-block;
    }
    .faderwrap{
        margin-top:80px;
    }
}

Answer 3

您应该将display: inline-block或float: left应用于'li'元素。

菜单未水平对齐

3 个答案: