W3.CSS -为什么我的顶部导航栏在两个不同的地方换行到下一行？

qmelpv7a  于 2023-04-01  发布在  其他
关注(0)|答案(2)|浏览(183)

为什么我在这个页面上的顶部导航栏在“美化”菜单选项的前后换行？
我正在试用W3.CSS，到目前为止，我发现它是一个相当令人满意的体验。我很快就制作了一个 backbone 网站，发现它比我不使用W3.CSS时得到的更清晰，更简洁。
除了在景观选项周围奇怪的分裂之外， backbone 工作得相当好。
我在代码中找不到任何可能导致这些中断的东西。或者我应该说我的Devtools调试技能不够。我如何跟踪这个问题？

css

2条答案

按热度按时间
7vux5j2d

7vux5j2d1#

.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%; */
}

如果你想保持float的正确性，只需要将css .w3-block改为

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

赞(0）分享  回复(0）举报  2023-04-01
yhived7q

yhived7q2#

上面是你的菜单的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>
赞(0）分享  回复(0）举报  2023-04-01
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com