CSS响应式菜单

Question

我的响应式菜单出现问题。当我单击菜单导航时，所有列表都显示为水平。但我希望它是垂直的，这意味着1行中只有1个列表。请帮助我，我是编程新手

    .menu ul.topnav li:not(:first-child) {

      display: none;

    }

    .menu ul.topnav li.icon {

      display: inline-block;

      float: right;

    }

    .menu ul.topnav.responsive {

      position: relative;

    }

    .menu ul.topnav.responsive li.icon {

      position: absolute;

      right: 0;

      top: 0;

    }

    .menu ul.topnav.responsive li {

      float: left;

      display: block;

      background-color: #0099FF;

    }

    .menu ul.topnav.responsive li a {

      display: block;

      text-align: left;

      float: left;

    }

    .menu-wrap {

      background: #1a202c;

      overflow: hidden;

      width: 100%;

    }

    .menu {

      width: 70.2782%;

      height: 85px;

      margin-top: 80px;

      background-color: #0099FF;

      margin-right: auto;

      margin-bottom: 0;

      margin-left: auto;

    }

    .menu ul {

      background-color: #0099FF;

    }

    .menu ul li {

      list-style: none;

      float: left;

      width: auto;

      margin-right: -4px;

    }

    .menu ul li a {

      display: inline-block;

      height: 85px;

      line-height: 85px;

      padding-left: 30px;

      padding-right: 30px;

      font-size: 14px;

      font-family: 'Oswald', sans-serif;

      color: #ffffff;

      border-right: #0099FF solid 1px;

      text-transform: uppercase;

    }

    .menu ul li a:hover {

      background: #e1ece7;

      color: #1a202c;

    }

    .menu ul li a.active {

      background: #e1ece7;

      color: #1a202c;

    }

<script>
  function myFunction() {
    document.getElementsByClassName("topnav")[0].classList.toggle("responsive");
  }
</script>

<div class="menu-wrap">


  <div class="menu">
    <ul class="topnav">
      <li><a href="index.html" class="active">home</a>
      </li>
      <li><a href="about.html">about</a>
      </li>
      <li><a href="services.html">Services</a>
      </li>
      <li><a href="register.html">Register </a>
      </li>
      <li class="icon">
        <a href="javascript:void(0);" onclick="myFunction()">&#9776;</a>
      </li>

    </ul>

Answer 1

将li的宽度设置为100%

ul.topnav.responsive li {
    width: 100%;
}
ul.topnav.responsive{
padding-left:0;
}

修正了您的代码段

.menu ul.topnav li:not(:first-child) {

      display: none;

    }

    .menu ul.topnav li.icon {

      display: inline-block;

      float: right;

    }

    .menu ul.topnav.responsive {

      position: relative;

    }

    .menu ul.topnav.responsive li.icon {

      position: absolute;

      right: 0;

      top: 0;

    }

    .menu ul.topnav.responsive li {

      float: left;

      display: block;

      background-color: #0099FF;

    }

    .menu ul.topnav.responsive li a {

      display: block;

      text-align: left;

      float: left;

    }

    .menu-wrap {

      background: #1a202c;

      overflow: hidden;

      width: 100%;

    }

    .menu {

      width: 70.2782%;

      height: 85px;

      margin-top: 80px;

      background-color: #0099FF;

      margin-right: auto;

      margin-bottom: 0;

      margin-left: auto;

    }

    .menu ul {

      background-color: #0099FF;

    }

    .menu ul li {

      list-style: none;

      float: left;

      width: auto;

      margin-right: -4px;

    }

    .menu ul li a {

      display: inline-block;

      height: 85px;
      line-height: 85px;

      padding-left: 30px;

      padding-right: 30px;

      font-size: 14px;

      font-family: 'Oswald', sans-serif;

      color: #ffffff;

      border-right: #0099FF solid 1px;

      text-transform: uppercase;

    }

    .menu ul li a:hover {

      background: #e1ece7;

      color: #1a202c;

    }

    .menu ul li a.active {

      background: #e1ece7;

      color: #1a202c;

    }

ul.topnav.responsive li {
    width: 100%;
    display: inline-block;
}
ul.topnav.responsive{
padding-left:0;
}
ul.topnav.responsive li.icon {
    width: auto;
}

<script>
  function myFunction() {
    document.getElementsByClassName("topnav")[0].classList.toggle("responsive");
  }
</script>

<div class="menu-wrap">


  <div class="menu">
    <ul class="topnav">
      <li><a href="index.html" class="active">home</a>
      </li>
      <li><a href="about.html">about</a>
      </li>
      <li><a href="services.html">Services</a>
      </li>
      <li><a href="register.html">Register </a>
      </li>
      <li class="icon">
        <a href="javascript:void(0);" onclick="myFunction()">&#9776;</a>
      </li>

    </ul>

Answer 2

您可以尝试清除添加.menu ul li的每个列表项clear:both;，但您确实应该从菜单项列表中提取导航触发器，以便限制ul的大小更容易并且完全否定使用清除。

尝试和HTML架构如下：

<div class="menu-wrap">
<a class="menu-trigger" href="#" onclick="">&#9776;</a>
<div class="menu">
    <ul class="topnav">
        <li><a href="index.html" class="active">home</a>
        </li>
        <li><a href="about.html">about</a>
        </li>
        <li><a href="services.html">Services</a>
        </li>
        <li><a href="register.html">Register </a>
        </li>
    </ul>
</div>

Answer 3

    .menu ul.topnav li:not(:first-child) {

      display: none;

    }

    .menu ul.topnav li.icon {

      display: inline-block;

      float: right;

    }

    .menu ul.topnav.responsive {

      position: relative;

    }

    .menu ul.topnav.responsive li.icon {

      position: absolute;

      right: 0;

      top: 0;

    }

    .menu ul.topnav.responsive li {
    display: block;

      background-color: #0099FF;

    }

    .menu ul.topnav.responsive li a {

      display: block;

      text-align: left;

     

    }

    .menu-wrap {

      background: #1a202c;

      overflow: hidden;

      width: 100%;

    }

    .menu {

      width: 70.2782%;

     /* height: 85px;*/

      margin-top: 80px;

      background-color: #0099FF;

      margin-right: auto;

      margin-bottom: 0;

      margin-left: auto;

    }

    .menu ul {

      background-color: #0099FF;

    }

    .menu ul li {

      list-style: none;

     
      width: auto;

      margin-right: -4px;

    }

    .menu ul li a {

      display: inline-block;

      height: 85px;

      line-height: 85px;

      padding-left: 30px;

      padding-right: 30px;

      font-size: 14px;

      font-family: 'Oswald', sans-serif;

      color: #ffffff;

      border-right: #0099FF solid 1px;

      text-transform: uppercase;

    }

    .menu ul li a:hover {

      background: #e1ece7;

      color: #1a202c;

    }

    .menu ul li a.active {

      background: #e1ece7;

      color: #1a202c;

    }

<script>
  function myFunction() {
    document.getElementsByClassName("topnav")[0].classList.toggle("responsive");
  }
</script>

<div class="menu-wrap">


  <div class="menu">
    <ul class="topnav">
      <li><a href="index.html" class="active">home</a>
      </li>
      <li><a href="about.html">about</a>
      </li>
      <li><a href="services.html">Services</a>
      </li>
      <li><a href="register.html">Register </a>
      </li>
      <li class="icon">
        <a href="javascript:void(0);" onclick="myFunction()">&#9776;</a>
      </li>

    </ul>

Answer 4

<style>
.menu ul.topnav li:not(:first-child) {
 display: none;
}
.menu ul.topnav li.icon {
    display: inline-block;
    position: absolute;
    right: 0;
    top: 0;
}
.menu ul.topnav.responsive {
    position: relative;
}
.menu ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
    background: none;
    display: inline-block;
    width: auto;
}
.menu ul.topnav.responsive li {
    float: none;
    width:100%;
    display: inline-block;
    background-color: #0099FF;
}
.menu ul.topnav.responsive li a {
    display: block;
    text-align: left;
}
.menu ul.topnav.responsive li.icon a {
    float:right;
    background: #016fb9;
}
.menu ul.topnav.responsive li.icon a:hover {
    color:#fff;
}
.menu-wrap {
    background: #1a202c;
    overflow: hidden;
    width: 100%;
}
.menu {
    width: 70.2782%;
    height: auto;
    margin-top: 80px;
    background-color: #0099FF;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
}
.menu ul {
    background-color: #0099FF;
    display:inline-block;
    width:100%;
    float:none;
    padding-left:0;
    position:relative;
}
.menu ul li {
    list-style: none;
    float: none;
    width: auto;
}
.menu ul li a {
    display: inline-block;
    height: auto;
    line-height: 85px;
    padding-left: 30px;
    padding-right: 30px;
    font-size: 14px;
    font-family: 'Oswald', sans-serif;
    color: #ffffff;
    border-right: #0099FF solid 1px;
    text-transform: uppercase;
}
.menu ul li a:hover {
    background: #e1ece7;
    color: #1a202c;
}
.menu ul li a.active {
    background: #e1ece7;
    color: #1a202c;
}
</style>
<script>
  function myFunction() {
    document.getElementsByClassName("topnav")[0].classList.toggle("responsive");
  }
</script>
<div class="menu-wrap">
<div class="menu">
<ul class="topnav">
  <li><a href="index.html" class="active">home</a> </li>
  <li><a href="about.html">about</a> </li>
  <li><a href="services.html">Services</a> </li>
  <li><a href="register.html">Register </a> </li>
  <li class="icon"> <a href="javascript:void(0);" onclick="myFunction()">&#9776;</a> </li>
</ul>

Answer 5

请在[js小提琴] [https://jsfiddle.net/yhq1pzhj/] 1

中找到相同的示例

<script>
    function openNav() {
        $("#mySidenav").css('width', '150px');
    }

    function closeNav() {
        $("#mySidenav").css('width', '0px');
    }

</script>
<div>
    <div id="mySidenav" class="sidenav">
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">X</a>
        <a href="index.html" class="active">home</a>
        <a href="about.html">about</a>

        <a href="services.html">Services</a>

        <a href="register.html">Register </a>
    </div>

    <i class="fa fa-bars" style="font-size:32px;cursor:pointer;padding-left: 35px;padding-top: 15px;" onclick="javascript:openNav()"></i></div>

====== CSS ==

.sidenav {
    /* height: 100%; */
    width: 0;
    position: fixed;
    z-index: 1;
    /* top: 0;
    left: 0; */
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s
}

.sidenav a:hover,
.offcanvas a:focus {
    color: #f1f1f1;
}

@media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 15px;
    }
    .sidenav a {
        font-size: 18px;
    }
}