Question

我是新手，所以我很无能为力。

每当我使用不同的分辨率访问我的网站时，菜单会发生很大变化并且无法正确对齐。告诉我，如果我需要更多的HTML或CSS。我的网页是Aulan.co

我的代码：

ul {
    font-size: 25px;
    color: black;
    text-align: center;
    list-style-type: none;
    margin-bottom: 2em;
    line-height: 150%;
    margin-left: 3em;
    margin-right: 5em;
}
  
#menu {
      list-style-type: none;
      margin: auto;
      width: 90%;
      height: auto;
      padding: auto;
      overflow: hidden;
      background-color: #353B4E;
      text-align: center;
      font-size: 18px;
    }

li {
    text-align: center;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 5px 70px;
    text-decoration: none;
    height: auto;
}

li a:hover {
    background-color: #111;
    display: inline;
}

#menus {
float: left;

<h1> AuLan </h1>
<ul id="menu">
  <li id="menus"><a class="active">Forside</a></li>
  <li id="menus"><a href="info.html">Informasjon</a></li>
  <li id="menus"><a href="regler.html">Regler</a></li>
  <li id="menus"><a href="crew.html">Crew</a></li>
  <li id="menus"><a href="kontakt.html">Kontakt oss</a></li>
  <li id="menus"><a href="seat.html">Seatmap</a></li>
  <li id="menus"><a href="time.html">Timeplan</a></li>
</ul>

Answer 1

你想要实现的目标并不是很清楚，但我试图以我认为你可能想要的方式改变你的代码。我从CSS中取出了许多不必要的代码并添加了一些代码。在HTML中，我将menus ID更改为一个类，因为每个页面只能使用一次。

您可以根据需要调整min-width规则中的padding和menu li a设置（以及其他宽度和填充设置）

 
#menu {
      font-size: 25px;
      list-style-type: none;
      width: 90%;
      background-color: #353B4E;
      font-size: 18px;
      padding: 10px 20px;
    }
#menu li {
    display: inline-block;
    line-height: 150%;
}
#menu li a {
    display: block;
    min-width: 100px;
    color: white;
    padding: 5px 15px;
    text-decoration: none;
}
#menu li a:hover {
    background-color: #111;
}

<h1> AuLan </h1>
<ul id="menu">
  <li class="menus"><a class="active">Forside</a></li>
  <li class="menus"><a href="info.html">Informasjon</a></li>
  <li class="menus"><a href="regler.html">Regler</a></li>
  <li class="menus"><a href="crew.html">Crew</a></li>
  <li class="menus"><a href="kontakt.html">Kontakt oss</a></li>
  <li class="menus"><a href="seat.html">Seatmap</a></li>
  <li class="menus"><a href="time.html">Timeplan</a></li>
</ul>

重新调整水平菜单以解决问题

1 个答案: