Question

我受命将导航栏链接放在professorpooch.com上，但是注意到topnav代码没有ul标签，只有标签。

我能够使用.topnav {display：flex; align-items：居中; justify-content：center;}，但它在较小的屏幕上无法显示，因此我将其删除。我想我不确定如何正确调整媒体查询。建议表示赞赏。

<div class="topnav" id="myTopnav">
    <a href="/">Home</a>
<div class="dropdown">
    <button class="dropbtn">About 
        <i class="fa fa-caret-down"></i>
    </button>
<div class="dropdown-content">
    <a href="Meet.htm">Meet the Professor</a>
    <a href="Resume-Bio.htm">Resume-Bio</a>
</div>
</div>
<div class="dropdown">
    <button class="dropbtn">Music Business Education 
        <i class="fa fa-caret-down"></i>
    </button>
<div class="dropdown-content">
    <a href="Education.htm">Books & Courses Info</a>
    <a href="Book.htm">The Music Biz Book</a>
    <a href="Managing.htm">Artist Development & Management Course</a>
    <a href="Publishing.htm">Songwriters & Music Publishing Course</a>
    <a href="Producing.htm">Producing, Production Companies & Indie     Labels Course</a>
    <a href="music-business-complete.htm">Music Business Education     Curriculum</a>
</div>
</div> 
    <a href="https://professorpooch.com/gdcac/">Self-Empowerment</a>
    <a href="Services.htm">Career Guidance</a>
<div class="dropdown">
    <button class="dropbtn">Contract Services 
        <i class="fa fa-caret-down"></i>
    </button>
<div class="dropdown-content">
    <a href="contract-services.htm">Regarding Contracts</a>
    <a href="personalized-contractual-services.htm">Personalized Contract Services</a>
    <a href="music-business-contracts-descriptions.pdf">Download Contract Descriptions PDF</a>
</div>
</div>
    <a href="Library.htm">Free Library</a>
    <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>

.topnav {
  overflow: hidden;
  background-color: #b40001;
  padding-left: 10%;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 10px;
  text-decoration: none;
  font-size: 17px;
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 17px;    
  border: none;
  outline: none;
  color: white;
  padding: 17px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #f0f0f0;
  color: #000;
}

.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

.dropdown:hover .dropdown-content {
  display: block;
}

@media screen and (max-width: 1068px) {
  .topnav {padding-left: 18px;}
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;  
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 1068px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

Answer 1

好，永不放弃-永不投降吧？看来我已经通过添加新的媒体查询来解决了该问题：

 @media screen and (min-width: 780px) {
  .topnav {
    display: flex; 
    align-items: center; 
    justify-content: center;
  }
}

导航栏没有UL标签-无法将页面上的链接居中

1 个答案: