網站上的手風琴菜單的圖標前後

Question

我正嘗試使用this source的代碼在我的網站上添加一個手風琴菜單。除了表示正在打開或關閉的菜單的+和 - 圖標之外，一切都可以正常工作。 On my site, the icons appear below the words.

如何讓圖標出現在單詞左側居中，就像他們在原始源代碼中一樣？

編輯 對不起，我認爲源代碼的鏈接是足夠好的，因爲我只是複製並粘貼到我的網站。

var acc = document.getElementsByClassName("accordion"); 
 
var i; 
 

 
for (i = 0; i < acc.length; i++) { 
 
    acc[i].onclick = function() { 
 
    this.classList.toggle("active"); 
 
    var panel = this.nextElementSibling; 
 
    if (panel.style.maxHeight){ 
 
    \t panel.style.maxHeight = null; 
 
    } else { 
 
    \t panel.style.maxHeight = panel.scrollHeight + 'px'; 
 
    } 
 
    } 
 
}

button.accordion { 
 
    background-color: #eee; 
 
    color: #444; 
 
    cursor: pointer; 
 
    padding: 18px; 
 
    width: 100%; 
 
    border: none; 
 
    text-align: left; 
 
    outline: none; 
 
    font-size: 15px; 
 
    transition: 0.4s; 
 
} 
 

 
button.accordion.active, button.accordion:hover { 
 
    background-color: #ddd; 
 
} 
 

 
button.accordion:after { 
 
    content: '\002B'; 
 
    color: #777; 
 
    font-weight: bold; 
 
    float: right; 
 
    margin-left: 5px; 
 
} 
 

 
button.accordion.active:after { 
 
    content: "\2212"; 
 
} 
 

 
div.panel { 
 
    padding: 0 18px; 
 
    background-color: white; 
 
    max-height: 0; 
 
    overflow: hidden; 
 
    transition: max-height 0.2s ease-out; 
 
}

<h1 class="subsection_title"> Baby Sleeping Tips By Timeframe</h1> 
 
<p> 
 
Here are suggestions that most parents agree are worth trying during each phase: 
 
</p> 
 
<button class="accordion"><b>From 0 To 2 Months</b><br><p class="small"> Babies sleep regularly and often for the first couple of weeks. Put them down to sleep when you start to see the first signs of drowsiness (like drooping eyelids or some fussiness). 
 
</p></button>

Answer 1

您可以添加

position: relative; 
overflow: hidden; 

到button.accordion，並

position: absolute; 
right: 5px; 
top: 0; 
bottom: 0; 
transform: translateY(50%); 

到button.accordion:after。

工作例如：

var acc = document.getElementsByClassName("accordion"); 
 
var i; 
 

 
for (i = 0; i < acc.length; i++) { 
 
    acc[i].onclick = function() { 
 
    this.classList.toggle("active"); 
 
    var panel = this.nextElementSibling; 
 
    if (panel.style.maxHeight){ 
 
    \t panel.style.maxHeight = null; 
 
    } else { 
 
    \t panel.style.maxHeight = panel.scrollHeight + 'px'; 
 
    } 
 
    } 
 
}

button.accordion { 
 
    background-color: #eee; 
 
    color: #444; 
 
    cursor: pointer; 
 
    padding: 18px; 
 
    width: 100%; 
 
    border: none; 
 
    text-align: left; 
 
    outline: none; 
 
    font-size: 15px; 
 
    transition: 0.4s; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
button.accordion.active, button.accordion:hover { 
 
    background-color: #ddd; 
 
} 
 

 
button.accordion:after { 
 
    content: '\002B'; 
 
    color: #777; 
 
    font-weight: bold; 
 
    float: right; 
 
    margin-left: 5px; 
 
    position: absolute; 
 
    right: 5px; 
 
    top: 0; 
 
    bottom: 0; 
 
    transform: translateY(50%); 
 
} 
 

 
button.accordion.active:after { 
 
    content: "\2212"; 
 
} 
 

 
div.panel { 
 
    padding: 0 18px; 
 
    background-color: white; 
 
    max-height: 0; 
 
    overflow: hidden; 
 
    transition: max-height 0.2s ease-out; 
 
}

<h1 class="subsection_title"> Baby Sleeping Tips By Timeframe</h1> 
 
<p> 
 
Here are suggestions that most parents agree are worth trying during each phase: 
 
</p> 
 
<button class="accordion"><b>From 0 To 2 Months</b><br><p class="small"> Babies sleep regularly and often for the first couple of weeks. Put them down to sleep when you start to see the first signs of drowsiness (like drooping eyelids or some fussiness). 
 
</p></button>