Question

为什么我在此页面上的顶部导航栏在“园林绿化”菜单选项之前和之后包装？

我正在带W3.CSS进行试驾，到目前为止，我发现它是一个相当令人满意的体验。与没有使用W3.CSS时相比，我已经非常快速地创建了一个骨架网站，并且发现它比以前更清晰，更简洁。

除了围绕“环境美化”选项进行奇怪的拆分外，骨骼还可以正常工作。 See the page here.

我在代码中看不到任何可能导致这些中断的内容。也许我应该说我的Devtools调试技能还不足以了解如何跟踪该问题。

任何人都可以帮助我找出问题所在吗？

Answer 1

.w3-block {
        display: inline-block !important;
        width: auto !important;
    }

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aux02 - About Us</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script src="javascript/all.js"></script> 
<body>
<!-- Navbar (sit on top) -->
<div class="w3-top">
  <div class="w3-bar w3-white w3-card" id="myNavbar">
    <a href="#home" class="w3-bar-item w3-button w3-wide">Auxsable</a>
    <!-- Right-sided navbar links -->
    <div class="w3-right w3-hide-small">
      <a href="choice07.php" class="w3-bar-item w3-button"><i class="fa fa-home"></i> HOME</a>
      <a href="contact_W3.php" class="w3-bar-item w3-button"><i class="fa fa-mobile-alt"></i> CONTACT US</a>

       <a onclick="myAccFuncTop()" href="javascript:void(0)" class="w3-button w3-block w3-white" id="myBtn">
      <i class="fa fa-th"></i> Landscaping <i class="fa fa-caret-down"></i></a>
      <div id="demoAccTop" class="w3-bar-block w3-hide w3-padding-large w3-medium">
      	<a href="landscape_design_W3.php" class="w3-bar-item w3-button"><i class="fas fa-drafting-compass"></i> Design</a>
      	<a href="landscape_installation_W3.php" class="w3-bar-item w3-button"><i class="fas fa-seedling"></i> Installation</a>
      	<a href="landscape_maintenance_W3.php" class="w3-bar-item w3-button"><i class="fas fa-hammer"></i> Maintenance</a>
      	<a href="plants_W3.php" class="w3-bar-item w3-button"><i class="fas fa-leaf"></i> Plants</a>
      </div> 
      
      <a href="forestry_W3.php" class="w3-bar-item w3-button"><i class="fas fa-tree"></i> FORESTRY</a>
      <a href="about_W3.php" class="w3-bar-item w3-button"><i class="fa fa-user"></i> ABOUT US</a>
    </div>
    <!-- Hide right-floated links on small screens and replace them with a menu icon -->

    <a href="javascript:void(0)" class="w3-bar-item w3-button w3-right w3-hide-large w3-hide-medium" onclick="w3_open()">
      <i class="fa fa-bars"></i>
    </a>
  </div>
</div><!-- Sidebar on small screens when clicking the menu icon -->
<nav class="w3-sidebar w3-bar-block w3-black w3-card w3-animate-left w3-hide-medium w3-hide-large" style="display:none" id="mySidebar">
  <a href="javascript:void(0)" onclick="w3_close()" class="w3-bar-item w3-button w3-large w3-padding-16">Close <i class="fas fa-times-circle"></i></a>
  <a href="choice07.php" onclick="w3_close()" class="w3-bar-item w3-button"><i class="fa fa-home"></i> Home</a>
  <a href="contact_W3.php" onclick="w3_close()" class="w3-bar-item w3-button"><i class="fa fa-mobile-alt"></i> Contact Us</a>
<!--   <a href="#" onclick="w3_close()" class="w3-bar-item w3-button">Landscaping</a>  -->
      <a onclick="myAccFunc()" href="javascript:void(0)" class="w3-button w3-block w3-white w3-left-align" id="myBtn">
      <i class="fa fa-th"></i> Landscaping <i class="fa fa-caret-down"></i>
    </a>
    <div id="demoAcc" class="w3-bar-block w3-hide w3-padding-large w3-medium">
      <a href="landscape_design_W3.php" class="w3-bar-item w3-button"><i class="fas fa-drafting-compass"></i> Design</a>
      <a href="landscape_installation_W3.php" class="w3-bar-item w3-button"><i class="fas fa-seedling"></i> Installation</a>
      <a href="landscape_maintenance_W3.php" class="w3-bar-item w3-button"><i class="fas fa-hammer"></i> Maintenance</a>
      <a href="plants_W3.php" class="w3-bar-item w3-button"><i class="fas fa-leaf"></i> Plants</a>
    </div>
 
  <a href="forestry_W3.php" onclick="w3_close()" class="w3-bar-item w3-button"><i class="fas fa-tree"></i> Forestry</a>
  <a href="about_W3.php" onclick="w3_close()" class="w3-bar-item w3-button"><i class="fa fa-user"></i> About Us</a>
</nav>

<div class="w3-auto">

<div class="w3-container w3-padding">
<br><br><br>
<h1>About Us</h1>      
<p>J<del>xxxxxx</del> S<del>xxxxxxx</del> is a Registered Professional Forester and graduate of the 
Honours Bachelor of Science in Forestry program at Lakehead University in Thunder Bay.</p>
<p>J<del>xxxxxx</del> has extensive experience in silviculture and site rehabilitation. Along with 
landowners, J<del>xxxxxx</del> writes woodlot management plans and tree marking prescriptions that 
focus on each customer's needs and desires for their woodland area.</p>
<p>Combining her skills of forest management and silviculture, she adds a little flair and generates 
unique and beautiful native plant landscape designs for the Carolinian Forest Region.</p>
</div>

<div class="w3-container w3-padding">
  <div class="w3-panel w3-light-grey w3-large">
    <p class="w3-medium w3-serif">
    <i>Serving Lambton, Huron, Middlesex and Essex Counties</i></p>
  </div>
</div>
</div><!-- w3-auto -->

<!-- Footer -->
<footer class="w3-center w3-blue-grey w3-padding">
  <p><i class="far fa-copyright"></i> 2019</p>
</footer>
</body>
</html>

您可以像这样更改两个班级

/* if you dont want to float right */
.w3-right {
    /* float: right!important; */ 
}

.w3-block {
    display: inline-block;
    /* width: 100%; */
}

如果要保持浮动正确，只需将css .w3-block更改为

.w3-block {
    display: inline-block;
    /* width: 100%; */
}

Answer 2

上图是菜单的html结构的屏幕截图。您可以将ul和li用于相同的菜单以及子菜单项。我对W3.css不太了解，但是您的CSS有太多的“！important”，因此根本不建议这样做。相反，我建议您重新构造该结构，因为当前的结构将不支持RWD。

<style>
    .menu{
        display:block;
        text-decoration:none;
        list-style:none;
        /* width as per requirement; & other styling */
    }
    .menu > li{
        position:relative; /* important to maintain the sub-menu item as local. */ 
        display:inline-block;
        /* width if needed */

    }
    .menu li a {
         display:block;
         width:100%;
         /*padding as per the need*/
    }
    .menu .subMenu{
        display:none;
        position:absolute;
        /* top as per the height of the .menu line-height or height */
        left:0;
        /* width: 100% or in em's */
    }
    .menu > li:hover .subMenu{
        display:block;            
    }
    .menu .subMenu li{
        display:block;
        width:100%;
    }
</style>
  <ul class="menu">
    <li><a href="#"><span class="homeIcon"></span><span>Home</span></a></li>
    <li><a href="#"><span class="contactusIcon"></span><span>Contact us</span></a></li>
    <li><a href="#"><span class="forestryIcon"></span><span>forestry</span></a></li>
    <li><a href="#"><span class="aboutusIcon"></span><span>About us</span></a></li>
    <li>
        <a href="#"><span class="landscapingIcon"></span><span>Landscaping</span></a>
        <ul class="subMenu">
            <li class="subMenuItem"><a href="#"item one</a></li>
            <li class="subMenuItem"><a href="#"item two</a></li>
            <li class="subMenuItem"><a href="#"item three</a></li>
        </ul>
    </li>
 </ul>

W3.CSS-为什么我的顶部导航栏在两个单独的位置环绕到下一行？

2 个答案: