CSS，HTML：側邊欄，動畫為1按鈕，不是2

Question

我得到了帶有一個用於打開菜單的“ M”按鈕的側面菜單，但是當打開菜單而不是10個按鈕時，我得到20個像B-Button一樣的東西，B是圖像，Button是文本。 當打開菜單時，它們需要是相同的按鈕，而不是2個單獨的按鈕，我知道它們被編碼為2個單獨的按鈕，但是只有在打開菜單時，我應該朝哪個方向將它們設為1個按鈕

碼：

  function MenuButton() { if (document.getElementById("mySidenav").style.width == "150px") { document.getElementById("mySidenav").style.width = "0px"; } else { document.getElementById("mySidenav").style.width = "150px"; } } 

 .sidenav { height: 100%; width: 0; position: fixed; top: 34px; left: 49px; z-index: 2; background-color: #111; overflow: hidden; transition: 0.5s; padding-top: 55px; } .sidenav a { font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-variant-numeric: normal; font-weight: normal; font-stretch: normal; font-size: 25px; line-height: 1; padding: 8px 8px 8px 15px; text-decoration: none; display: block; color: white; transition: 0.3s; white-space: nowrap; } .sidenav a:hover { background-color: #3498db; } .buttons { height: 100%; width: 50px; position: fixed; margin: 0 auto; top: 34px; left: 0; z-index: 1; background-color: #111; overflow: hidden; transition: 0.5s; padding-top: 14px; } .buttons a{ font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-variant-numeric: normal; font-weight: normal; font-stretch: normal; font-size:25px; line-height: 1; padding: 8px 8px 8px 15px; text-decoration: none; color: white; display: block; transition: 0.3s; cursor: pointer; } .buttons a:hover{ background-color: #3498db; } 

 <div id="mySidenav" class="sidenav"> <a>B</a> <a>B</a> <a>B</a> <a>B</a> <a>B</a> <a>B</a> <a>B</a> <a>B</a> <a>B</a> <a>B</a> </div> <div id="buttonside" class="buttons"> <a><span onclick="MenuButton()">M</span></a> <a>B</a> <a>B</a> <a>B</a> <a>B</a> <a>B</a> <a>B</a> <a>B</a> <a>B</a> <a>B</a> <a>B</a> </div> 

JSFiddle鏈接

Answer 1

嘗試將圖標或圖像包裝成一定寬度的span ，如下所示

 function MenuButton() { if (document.getElementById("buttonside").style.width == "150px") { document.getElementById("buttonside").style.width = "50px"; } else { document.getElementById("buttonside").style.width = "150px"; } } 

 .sidenav { background-color: #111; overflow: hidden; transition: 0.5s; } .sidenav a:hover { background-color: #3498db; } .buttons { width: 50px; background-color: #111; overflow: hidden; transition: 0.5s; padding-top: 14px; } .buttons a { font-size: 25px; line-height: 1; padding: 8px 0px; text-decoration: none; color: white; display: block; transition: 0.3s; cursor: pointer; white-space: nowrap; } .buttons a span { width: 50px; display: inline-block; text-align: center; } .buttons a:hover { background-color: #3498db; } 

 <div id="buttonside" class="buttons"> <a onclick="MenuButton()"><span>M</span></a> <div id="mySidenav" class="sidenav"> <a><span>B</span>Link</a> <a><span>B</span>Link</a> <a><span>B</span>Link</a> <a><span>B</span>Link</a> <a><span>B</span>Link</a> <a><span>B</span>Link</a> <a><span>B</span>Link</a> <a><span>B</span>Link</a> <a><span>B</span>Link</a> <a><span>B</span>Link</a> <a><span>B</span>Link</a> <a><span>B</span>Link</a> </div> </div>