W3.CSS - Почему моя верхняя панель навигации переносится на следующую строку в двух разных местах? - PullRequest
Новая
       20

W3.CSS - Почему моя верхняя панель навигации переносится на следующую строку в двух разных местах?

0 голосов
/ 19 марта 2019

Почему моя верхняя панель навигации на этой странице переносится до и после параметра меню «Ландшафтный дизайн»?

Я беру W3.CSS для тест-драйва и нахожу это довольно удовлетворительным опытом. Я довольно быстро создал сайт-скелет и нахожу его более четким и кратким, чем я привык, когда не использую W3.CSS.

Скелет работает достаточно хорошо, кроме странного раскола вокруг опции Ландшафтный дизайн. См. Страницу здесь.

Я не вижу в своем коде ничего, что могло бы вызвать эти перерывы. Или, может быть, я должен сказать, что моих навыков отладки в Devtools недостаточно, чтобы знать, как отследить эту проблему.

Может кто-нибудь помочь мне понять, что не так?

Ответы [ 2 ]

0 голосов
/ 19 марта 2019

enter image description here

Выше приведен снимок экрана структуры HTML вашего меню. Вы можете использовать ul и li для того же меню и пунктов подменю. Я не очень разбираюсь в W3.css, но в вашем css слишком много "! Важно", что совсем не рекомендуется. Вместо этого я бы предложил вам переделать структуру, так как текущая не будет поддерживать 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 голосов
/ 19 марта 2019 

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

enter image description here

ЕслиВы хотите сохранить правильное положение, измените только css .w3-block на 

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

enter image description here

...