为什么我在这个页面上的顶部导航栏在“美化”菜单选项的前后换行?我正在试用W3.CSS,到目前为止,我发现它是一个相当令人满意的体验。我很快就制作了一个 backbone 网站,发现它比我不使用W3.CSS时得到的更清晰,更简洁。除了在景观选项周围奇怪的分裂之外, backbone 工作得相当好。我在代码中找不到任何可能导致这些中断的东西。或者我应该说我的Devtools调试技能不够。我如何跟踪这个问题?
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
.w3-block { display: inline-block; /* width: 100%; */ }
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>
2条答案
按热度按时间7vux5j2d1#
你可以这样换两个班
如果你想保持float的正确性,只需要将css
.w3-block
改为yhived7q2#
上面是你的菜单的html结构的屏幕截图。你可以使用ul和li作为相同的菜单和子菜单项。我不太了解W3.css,但是你的css有太多的“!important”,这是不推荐的。相反,我建议你重新工作的结构,因为当前的一个将不支持RWD。