如何使下拉菜單水平

我不知道這是否可能，但是，我有一個名爲水果的按鈕。當我點擊它時，4個水果按鈕垂直向下出現，但我希望它們水平顯示？如何使下拉菜單水平

任何想法或提示，我會如何去做這件事？

請不要說「自己試試看，是不是在這裏爲你做這件事」..我一直在和我無能爲力。我所尋找的只是一個暗示，並不期待任何人爲我編碼。謝謝:)

HTML

<div id="myNav" class="overlay"> 
     <!-- Button to close the overlay navigation --> 
     <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 
     <!-- Overlay content --> 
     <div class="overlay-content"> 
      <button class="dropbtn btn-circle overlay-icon" onclick='myFunction()'>Fruits</button> 
      <div id="myDropdown" class="dropdown-content"> 
       <div class="row"> 
        <div class="col-xs-12"> 
         <button class="dropbtn btn-circle overlay-icon">Apple</button> 
         <button class="dropbtn btn-circle overlay-icon">Banana</button> 
         <button class="dropbtn btn-circle overlay-icon">Orange</button> 
         <button class="dropbtn btn-circle overlay-icon">Pear</button> 
        </div> 
       </div> 
      </div> 

     </div> 
    </div>

<script> 
    /* When the user clicks on the button, 
    toggle between hiding and showing the dropdown content */ 
    function myFunction() { 
     document.getElementById("myDropdown").classList.toggle("show"); 
    } 

    // Close the dropdown if the user clicks outside of it 
    window.onclick = function(event) { 
     if (!event.target.matches('.dropbtn')) { 

     var dropdowns = document.getElementsByClassName("dropdown-content"); 
     var i; 
     for (i = 0; i < dropdowns.length; i++) { 
      var openDropdown = dropdowns[i]; 
      if (openDropdown.classList.contains('show')) { 
      openDropdown.classList.remove('show'); 
      } 
     } 
     } 
    } 
    </script>

CSS

.overlay-icon { 
    float: center; 
    width: 120px; 
    height: 120px; 
    text-align: center; 
    padding: 600px 0; 
    font-size: 12px; 
    line-height: 1.428571429; 
    border-radius: 36px; 
    margin-left: 660px; 
    margin-bottom: 20px; 
} 

.dropbtn:hover, .dropbtn:focus { 
    background-color: #3e8e41; 
} 

.dropdown-content { 
    display: none; 
    position: relative; 
    min-width: 10px; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
    z-index: 1; 
    font-size: 10px; 
    margin-left: 0px; 
} 

.dropdown-content dropbtn { 
    color: black; 
    padding: 12px 16px; 
    text-decoration: none; 
    display: block; 
    font-size: 10px; 
}

來源

2017-05-04 Rgoat

是下拉開放？ – Phantom

是的，但它的作品，但4個項目垂直向下出現 – Rgoat

我得到錯誤的小提琴...你可以創建這個小提琴... – Phantom

我認爲你需要做的按鈕爲inline-block的顯示。這裏是CSS代碼：

.dropdown-content dropbtn { 
    display: inline-block; 
}

來源

2017-05-04 05:41:29 Rakesh

不，這不起作用 – Rgoat

謝謝你嘗試雖然 – Rgoat

變化在你的CSS，我已刪除margin-left和600px 0

CSS改變padding到60px 0：

.overlay-icon { 
    float: center; 
    width: 120px; 
    height: 120px; 
    text-align: center; 
    padding: 60px 0; 
    font-size: 12px; 
    line-height: 1.428571429; 
    border-radius: 36px; 
    margin-bottom: 20px; 
} 

.show { 
    display: initial; 
}

來源

2017-05-04 06:25:47 Phantom

如何使下拉菜單水平

回答

相關問題