使P標籤忽略父分區

我遇到了我的畫布外菜單。當菜單打開時，其中的p標籤在擴展時似乎會改變它們的左邊距。我希望我的p標籤完全忽略菜單的打開和關閉並保持其文本對齊。這裏是什麼，我想要它做的一個想法：https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav_push 使P標籤忽略父分區

與此相比，我當前的代碼：

function openNav() { 
 
    document.getElementById("nav").style.width = "250px"; 
 
    document.getElementById("burger").style.left = "260px"; 
 
} 
 

 
function closeNav() { 
 
    document.getElementById("nav").style.width = "0"; 
 
    document.getElementById("burger").style.left = "10px"; 
 
}

* { 
 
    margin: 0; 
 
    madding: 0; 
 
} 
 

 
html, body { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    font-family: sans-serif; 
 
} 
 

 
nav { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    display: inline-block; 
 
    height: 100%; 
 
    background-color: #333; 
 
    color: #fff; 
 
    padding-top: 30px; 
 
    text-align: center; 
 
    width: 0; 
 
    white-space: nowrap; 
 
    overflow-x: hidden; 
 
    transition: width 1.5s; 
 
} 
 

 
.close { 
 
    cursor: pointer; 
 
    position: absolute; 
 
    top: 5px; 
 
    right: 15px; 
 
    font-size: 2em; 
 
} 
 

 
nav p { 
 
    cursor: pointer; 
 
    display: block; 
 
    font-size: 1.7em; 
 
    margin: 30px auto; 
 
    white-space: nowrap; 
 
} 
 

 
nav p:hover { 
 
    opacity: 0.8; 
 
} 
 

 
.burger { 
 
    will-change: left; 
 
    position: absolute; 
 
    left: 10px; 
 
    cursor: pointer; 
 
    font-size: 2em; 
 
    z-index: 1; 
 
    transition: 1.5s; 
 
}

<nav id="nav"> 
 
    <span class="close" onclick="closeNav()">&times;</span> 
 
    <p>Home</p> 
 
    <p>About</p> 
 
    <p>Blog</p> 
 
    <p>Contact</p> 
 
</nav> 
 

 
<span class="burger" id="burger" onclick="openNav()">&#9776;</span>

從本質上講，我希望p標籤充當如果他們被定位絕對，但在導航擴展時應該居中。

來源

2017-03-06 Hudson Taylor

環繞你的<p>標籤另一<div>這將靜態定位是否<nav>移動。那麼你的中心對齊適用於它：

function openNav() { 
 
    document.getElementById("nav").style.width = "250px"; 
 
    document.getElementById("burger").style.left = "260px"; 
 
} 
 

 
function closeNav() { 
 
    document.getElementById("nav").style.width = "0"; 
 
    document.getElementById("burger").style.left = "10px"; 
 
}

* { 
 
    margin: 0; 
 
    madding: 0; 
 
} 
 

 
html, body { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    font-family: sans-serif; 
 
} 
 

 
nav { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    display: inline-block; 
 
    height: 100%; 
 
    background-color: #333; 
 
    color: #fff; 
 
    padding-top: 30px; 
 
    width: 0; 
 
    white-space: nowrap; 
 
    overflow-x: hidden; 
 
    transition: width 1.5s; 
 
} 
 

 
.close { 
 
    cursor: pointer; 
 
    position: absolute; 
 
    top: 5px; 
 
    right: 15px; 
 
    font-size: 2em; 
 
} 
 

 
nav p { 
 
    cursor: pointer; 
 
    display: block; 
 
    font-size: 1.7em; 
 
    margin: 30px 0; 
 
    white-space: nowrap; 
 
} 
 

 
#pHolder{ 
 
    margin-left: 75px; 
 
    width: 80px; 
 
    text-align: center; 
 
} 
 
nav p:hover { 
 
    opacity: 0.8; 
 
} 
 

 
.burger { 
 
    will-change: left; 
 
    position: absolute; 
 
    left: 10px; 
 
    cursor: pointer; 
 
    font-size: 2em; 
 
    z-index: 1; 
 
    transition: 1.5s; 
 
}

<nav id="nav"> 
 
    <span class="close" onclick="closeNav()">&times;</span> 
 
    <div id="pHolder"> 
 
    <p>Home</p> 
 
    <p>About</p> 
 
    <p>Blog</p> 
 
    <p>Contact</p> 
 
    </div> 
 
</nav> 
 

 
<span class="burger" id="burger" onclick="openNav()">&#9776;</span>

來源

2017-03-06 05:48:46 NDFA

完美！非常感謝。 –

和你一樣。尼斯傑出的菜單@H.Allen。別客氣 – NDFA

-1

而是改變width的，保持寬度不變，改變的nav

的left對準試試這個

function openNav() { 
 
    document.getElementById("nav").style.left = "0px"; 
 
    document.getElementById("burger").style.left = "260px"; 
 
} 
 

 
function closeNav() { 
 
    document.getElementById("nav").style.left = "-250px"; 
 
    document.getElementById("burger").style.left = "10px"; 
 
}

* { 
 
    margin: 0; 
 
    madding: 0; 
 
} 
 

 
html, body { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    font-family: sans-serif; 
 
} 
 

 
nav { 
 
    position: absolute; 
 
    top: 0; 
 
    left: -250px; 
 
    display: inline-block; 
 
    height: 100%; 
 
    background-color: #333; 
 
    color: #fff; 
 
    padding-top: 30px; 
 
    text-align: center; 
 
    width: 250px; 
 
    white-space: nowrap; 
 
    overflow-x: hidden; 
 
    transition: left 1.5s; 
 
} 
 

 
.close { 
 
    cursor: pointer; 
 
    position: absolute; 
 
    top: 5px; 
 
    right: 15px; 
 
    font-size: 2em; 
 
} 
 

 
nav p { 
 
    cursor: pointer; 
 
    display: block; 
 
    font-size: 1.7em; 
 
    margin: 30px auto; 
 
    white-space: nowrap; 
 
} 
 

 
nav p:hover { 
 
    opacity: 0.8; 
 
} 
 

 
.burger { 
 
    will-change: left; 
 
    position: absolute; 
 
    left: 10px; 
 
    cursor: pointer; 
 
    font-size: 2em; 
 
    z-index: 1; 
 
    transition: 1.5s; 
 
}

<nav id="nav"> 
 
    <span class="close" onclick="closeNav()">&times;</span> 
 
    <p>Home</p> 
 
    <p>About</p> 
 
    <p>Blog</p> 
 
    <p>Contact</p> 
 
</nav> 
 

 
<span class="burger" id="burger" onclick="openNav()">&#9776;</span>

來源

2017-03-06 05:20:25 sam

這不是我真正想要的東西。你會注意到我給出的鏈接，導航「鏈接」完全忽略了側面導航。因此，他們一直處於相同的位置，而導航擴展和合同。 –

在w3schools中，他們保持內容「左對齊」，而您嘗試使用「中心」對齊。所以當你改變'nav'的'width'時，當然，內容也會根據'width'移動。 – sam

對，這就是爲什麼我正在尋找繞過這種行爲的解決方案。我在想什麼涉及絕對定位... –

使P標籤忽略父分區

回答

相關問題