Question

我想要一个移动下拉菜单但我的问题是我的菜单中的项目之间不添加空格。我已经试图改变它，但不再是在中心了。应该怎么样。它的实际外观

＆＃13;

/* 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');
      }
  }
}

＆＃13;

* {
    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
}

＆＃13;

<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>

＆＃13;

Answer 1

尝试使用Bootstrap，就像移动视图一样，使用

<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列中划分了一行，你也可以单独调整它！

Answer 2

我进行了一些HTML调整，使导航结构更加严格，我还添加了一些小的CSS更改，例如删除绝对定位和一些列表结构不需要的浮动。

菜单现在应该位于顶层链接的中心位置。

＆＃13;

/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
window.myFunction = function() {
    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');
      }
  }
}

＆＃13;

* {
    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 {
    font-size: 1em;
    color: white;
    text-align: center;
    padding: 0.625em 1em;
    text-decoration: none;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  margin: 0;
  padding: 0;
}
li a {
  display:block;
  text-align:center;
  width: 100%;
}
.dropdown {
    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;
    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
}

＆＃13;

<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">
       <ul>
          <li><a class="dropbtn" onclick="window.myFunction()">Startseite</a></li>
          <ul class="dropdown-content" id="myDropdown">
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
          </ul>
       </ul>
    </div>
  </div>
</header>

＆＃13;

Answer 3

您可以在display:flex和flex-direction:column上使用myDropdown和dropdown

下面的代码段

＆＃13;

function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

window.onclick = function(e) {
  if (!e.target.matches('.dropbtn')) {
    var myDropdown = document.getElementById("myDropdown");
    if (myDropdown.classList.contains('show')) {
      myDropdown.classList.remove('show');
    }
  }
}

＆＃13;

* {
  margin 0;
  box-sizing: border-box;
  color: #FFFFFF;
  font-family: "Monaco", "Menlo", "Consolas", monospace;
  text-align: center;
}

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;
  background-color: inherit;
  text-align: center;
}

.dropdown-content {
  background-color: #333;
  min-width: 10em;
  z-index: 1;
  flex-direction: column;
  display: none;
}

.dropdown a {
  text-align: center;
}

.dropdown-content a {
  float: left;
  font-size: 1em;
  color: white;
  text-align: center;
  padding: 0.625em 1em;
  text-decoration: none;
}

.show {
  display: flex;
}

.dropdown {
  text-align: center;
  display: flex;
  flex-direction: column
}

＆＃13;

<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>

＆＃13;

html手机菜单大小

3 个答案: