javascript - html 移动菜单大小调整

Question

我想要一个移动下拉菜单，但我的问题是菜单中的元素之间没有添加空格。 我已经尝试改变宽度，但它不再位于中心。 它应该是什么样子。 它的实际外观

/* 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(e) {
  if (!e.target.matches('.dropbtn')) {
    var myDropdown = document.getElementById("myDropdown");
      if (myDropdown.classList.contains('show')) {
        myDropdown.classList.remove('show');
      }
  }
}

* {
    margin 0;
    box-sizing: border-box;
    color: #FFFFFF;
    font-family: "Monaco", "Menlo", "Consolas", monospace;
    text-align: left
}
body {
    padding: 0 1.25em 1.25em 1.25em;
    align-items: center;
    background-color: #1E1E1E;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0
}
header {
    max-width: 70%;
}
h1.undertitle {
    margin-top: 0.25em;
    margin-bottom: 0.25em;
    font-size: 75%;
    word-spacing: -0.25em;
}
h1.undertitle::before{
  content: none;
}
.container {
    overflow: hidden;
    background-color: #333;
    font-family: Arial
}
.container  a {
    float: left;
    font-size: 1em;
    color: white;
    text-align: center;
    padding: 0.625em 1em;
    text-decoration: none;
}
.dropdown {
    float: left;
    overflow: hidden
}
.dropdown .dropbtn {
    cursor: pointer;
    font-size: 1em;
    border: none;
    outline: none;
    color: white;
    padding: 0.625em 1em;
    background-color: inherit;
}
/*.container a:hover,
.dropdown:hover .dropbtn {
    background-color: white;
    color: black
}*/

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #333;
    min-width: 10em;
    /*box-shadow: 0em 0.5em 1em 0em rgba(0, 0, 0, 0.2);*/
    z-index: 1
}
.dropdown-content a {
  float: left;
  font-size: 1em;
  color: white;
  text-align: center;
  padding: 0.625em 1em;
  text-decoration: none;
}
/*.dropdown-content a:hover {
    background-color: #ddd
}*/
.show {
    display: block
}

<header>
  <h1> Alan Pijak</h1>
  <h1 class="undertitle">
    intressiert sich für <span class="orange w700">Java</span> und <span class="blue w700">C++</span>
  </h1>

  <div class="container">
   

    <div class="dropdown">
      <a class="dropbtn" onclick="myFunction()">Startseite</a>
      <div class="dropdown-content" id="myDropdown">
        <a href="#">Startseite</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>
  </div>
</header>

Answer 1

为此尝试使用 Bootstrap，就像移动 View 一样，使用

<div class="col-xs-4"> Menu Item -1 </div>

<div class="col-xs-4"> Menu Item -2 </div>

<div class="col-xs-4"> Menu Item -3 </div> 现在一切都完成了，因为 bootstrap 将一行分成 12 列，您也可以单独调整它!!