媒體查詢後，如何讓元素返回到正確的位置？

-1

從「@media screen and (max-width: 800px)」重新調整窗口大小後，我無法將某些列表元素返回到其正確的位置。媒體查詢後，如何讓元素返回到正確的位置？

這些列表元素默認集中在標題行中，我的目標是讓它們顯示在我的側欄中的較小設備上。

現在一切都很好，從大屏幕調整到小屏幕，但然後我使用一些JavaScript在小屏幕模式下打開和關閉側面菜單，當我然後嘗試調整它回到大屏幕大小列表元素不會回到他們應該在的地方。

他們似乎保持排列在頁面左側並且不再居中。

此外，我檢查了可能會導致此問題的CSS覆蓋，但似乎沒有，它是奇怪的，它在我使用JavaScript之前工作。

// för att öppna sidomenyn med 250 width 
 
function openNav() { 
 
    document.getElementById("minHuvudmeny").style.width = "250px"; 
 
} 
 

 
function closeNav() { <!--Script för att stänga sidomenyn med 0 width--> 
 
    document.getElementById("minHuvudmeny").style.width = "0"; 
 
}

body { 
 
    text-align: center; 
 
    background-image: url(bakgrund.jpg); 
 
    background-position: bottom; 
 
    background-size: auto; 
 
    font-family: 'Cuprum', sans-serif; 
 
    left: 0; 
 
    margin: 0; } 
 

 
    .navknapp {     ****Here i put the nav list inline**** 
 
    display: inline; 
 
    margin: 10px; } 
 

 
    @media screen and (max-width: 800px) { 
 
    .huvudmeny { 
 
     height: 100%; 
 
     width: 0; 
 
     background-color: #fff; 
 
     position: fixed; 
 
     z-index: 1; 
 
     overflow-x: hidden; 
 
     transition: 0.5s; 
 
     top: 0; 
 
     left: 0; 
 
     padding: 0; 
 
     padding-top: 60px; 
 
    } 
 
    .visameny { 
 
     display: block; 
 
     font-size: 50px; 
 
     text-align: left; 
 
     cursor: pointer; 
 
     position: fixed; 
 
     margin-left: 10px; 
 
     top: 0; 
 
    } 
 
    .ejvisameny { 
 
     display: block; 
 
    } 
 
    .huvudmeny .navknapp {     Here i put the navlist back to blocks 
 
     display: block; 
 
     border: 1px solid black; 
 
     transition: 0.3s 
 
    } 
 
    .huvudmeny .navknapp:hover, 
 
    .offcanvas .navknapp:focus { 
 
     background-color: red; 
 
    } 
 
    .huvudmeny .ejvisameny { 
 
     position: absolute; 
 
     top: 0; 
 
     right: 25px; 
 
     font-size: 36px; 
 
     margin-left: 50px; 
 
    } 
 
}

<header> 
 
    <h1 id=huvudRubrik>Välkommen till Daniels sida</h1> 
 
    <nav id="minHuvudmeny" class="huvudmeny"> 
 
     <a href="javascript:void(0)" class="ejvisameny" onclick="closeNav()">&#10006;</a> 
 
     <li class="navknapp"><a href="Ommig2/ommig2.htm">Home</a></li> 
 
     <li class="navknapp"><a href="news.asp">News</a></li> 
 
     <li class="navknapp"><a href="contact.asp">Contact</a></li> 
 
     <li class="navknapp"><a href="about.asp">About</a></li> 
 
    </nav> 
 
    <span class="visameny" onclick="openNav()">&#9776;</span> 
 
</header>

來源

2017-01-23 haverdaden

我建議你添加其它媒體查詢桌面（最小寬度：801px），你在哪兒一個寬度爲100％分配給一個導航非常重要的。

@media screen and (min-width: 801px) { 
    .huvudmeny { 
    width:100% !important; 
    } 
}

因此，您將覆蓋導航的零寬度，即將菜單粘貼到左邊緣。

demo

來源

2017-01-23 15:14:08

媒體查詢後，如何讓元素返回到正確的位置？

回答

相關問題