左對齊彈出菜單

Question

我花了好幾個小時試圖調整這個荒謬的代碼。 如何將菜單向右對齊？

 var k = 0; function fnclick() { document.documentElement.style.setProperty("--display", k? "none": "block"); k = 1 - k; }

 :root { --display: none; --width: 30%; --height: 5%; --bgcolor1: #222222; --bgcolor2: #222299; --bgcolor3: #2222FF; font-family: Arial; font-size: 14px; } a:hover, a#mnu:hover { background-color: var(--bgcolor2); } a:active, a#mnu:active { background-color: var(--bgcolor3); } body {} a { display: var(--display, block); display: block; width: var(--width); height: var(--height); padding: 5px; background-color: var(--bgcolor1); text-decoration: none; text-align: center; color: #FFFFFF; } div#navbar { border: 1px solid #ff1100; display: flex; top: 0px; right: 0px; position: fixed; margin-top: 10px; margin-right: 10px; justify-content: center; align-items: center; } a#mnu { display: block; width: 10%; height: var(--height); padding: 2px; background-color: var(--bgcolor1); color: #FFFFFF; border: 0px; }

 <div id="navbar"> <a id="mnu" onclick="fnclick()">&#9776;</a> <a id="mnuExit" onclick="mnuRefr()">Exit</a> <a id="mnuRefr" onclick="mnuRefr()">Refresh</a> <a id="mnuOpts" onclick="mnuOpts()">Chart Options</a> <a id="mnuSlct" onclick="mnuSlct()">Select Channels</a> <a id="mnuSave" onclick="mnuSave()">Save Snapshot</a> <a id="mnuHalt" onclick="mnuHalt()">Halt Plot</a> </div> <div>This absurd text keeps moving with every action of the menu, and do not keep QUIET, since the menu do not float freely over the text....</div>

Answer 1

假設我有一個元素 class alignRight

<div class="alignRight">  My Menu Item </div>

現在為上述元素寫一些 css

div.alignRight{
    display: flex;
    top: 0px;
    right: 0px;
    position: fixed;
    margin-top: 10px;
    margin-right: 10px;
    justify-content: center;
    align-items: center;
}

這里有 3 條重要的線路

  top: 0px;
  right: 0px;
  position: fixed;