Question

我正在为一个学校项目建立一个网站而且我被困住了。我为网站创建了一个导航栏，其中包含指向其他页面的链接，其中一个是带有更多链接的下拉菜单。我想把这些链接集中在一起，但我无法做到这一点，我已经尝试了我能在网上找到的所有东西，我迷路了。有人可以帮助我吗？

这是HTML代码：

<nav>
  <h1 class="header"><span>A</span>2's Prachtige Website</h1>
   <ul class="ulnav">
    <li class="li-nav"><a class="a-nav" href="../Intro en voorpagina.html"><span>I</span>ntroductie</a></li>
    <div class="dropdown">
        <li><button class="dropbtn" onclick="myFunction()"><span>O</span>mics Teksten</button></li>
        <div class="dropdown-content" id="myDropdown">
            <a href="../Omics/Metabolomics.html"><span>M</span>etabolomics</a>
            <a href="../Omics/Genomics.html"><span>G</span>enomics</a>
            <a href="../Omics/Transcriptonomics.html"><span>T</span>ranscriptonomics</a>
            <a href="../Omics/Epigenomics.html"><span>E</span>pigenomics</a>
            <a href="../Omics/Proteomics.html"><span>P</span>roteomics</a>
            <a href="../Omics/Systeembiologie.html"><span>S</span>ysteembiologie</a>
        </div>
    </div> 
    <li class="li-nav"><a class="a-nav" href="../Key Gene.html"><span>K</span>ey Gene</a></li>
    <li class="li-nav"><a class="a-nav" href="../Vacatures.html"><span>V</span>acatures</a></li>
    <li class="li-nav"><a class="a-nav" href="../Interview.html"><span>I</span>nterview</a></li>
    <li class="li-nav"><a class="a-nav" href="../HS Leiden.html"><span>H</span>S Leiden</a></li>
    <li class="li-nav"><a class="a-nav" href="../Bronnen.html"><span>B</span>ronnen</a></li>
</ul>
</nav>

这是CSS代码：

a.a-nav{
  color: white;
  font-family: 'Raleway', sans-serif;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 2px;
}

h1.header {
  color: white;
  font-family: 'Lato', sans-serif;
  font-size: 35px;
  line-height: 40px;
  position: relative;
  text-align: center;
}

ul.ulnav {
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    width: 90%;
}

li.li-nav a{
    float: left;
    display: block;
    padding: 8px;
    background-color: #269ccc;
    display: inline;
}

span {
  color: #ecbc00;
}

nav {
    text-align: center;
    width: 100%;
    background-color: #269ccc;
    top: 0;
    margin: 0 auto; left: 0px; right: 0px;
}

nav a:hover {
    background-color: #9ed2c5;
    color: white;
}

对任何愿意提供帮助的人，谢谢：）

Answer 1

目前还不完全清楚你想要达到的目标，但现在是：

https://jsfiddle.net/d2gdr9d7/1/

nav ul { text-align: center; }
nav ul li { display: inline-block; margin: 0 auto; }

将其添加到CSS的底部。

Answer 2

确定列表然后进行以下更改：

ul.ulnav {
  list-style-type: none;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  width: 90%;
  text-align: center;
}

li.li-nav {
  display: inline-block;
}

https://plnkr.co/edit/Vovh6tNdIraEmdfdPPLN?p=preview

Answer 3

你的问题不太清楚但是作为我的理解，我认为你想实现这个目标。我希望它会对你有所帮助。

.dropbtn, a.a-nav {
    color: white;
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 2px;
    background: none;
    border: none;
}

h1.header {
    color: white;
    font-family: 'Lato', sans-serif;
    font-size: 35px;
    line-height: 40px;
    position: relative;
    text-align: center;
}

ul.ulnav {
    /*list-style-type: none;*/
    /*margin: 0 auto;*/
    padding: 0;
    /*overflow: hidden;*/
    /*width: 90%;*/
    text-align: center;
}

li.dropdown, li.li-nav {
    display: inline-block;
    background-color: #269ccc;
}

li.li-nav a {
    display: inline-block;
    padding: 8px;
}

li.dropdown {
    position: relative;
}

.dropdown-content {
    position: absolute;
    background: #269CCC;
    text-align: left;
    top: 27px
}

.dropdown-content a {
    color: #fff;
    text-decoration: none;
    display: block;
    padding: 10px 5px
}

span {
    color: #ecbc00;
}

nav {
    text-align: center;
    width: 100%;
    background-color: #269ccc;
    top: 0;
    margin: 0 auto;
    left: 0px;
    right: 0px;
}

nav a:hover {
    background-color: #9ed2c5;
    color: white;
}

<nav>
  <h1 class="header"><span>A</span>2's Prachtige Website</h1>
  <ul class="ulnav">
    <li class="li-nav"><a class="a-nav" href="../Intro en voorpagina.html"><span>I</span>ntroductie</a></li>
    <li class="dropdown">
      <button class="dropbtn" onclick="myFunction()"><span>O</span>mics Teksten</button>
      <div class="dropdown-content" id="myDropdown">
        <a href="../Omics/Metabolomics.html"><span>M</span>etabolomics</a>
        <a href="../Omics/Genomics.html"><span>G</span>enomics</a>
        <a href="../Omics/Transcriptonomics.html"><span>T</span>ranscriptonomics</a>
        <a href="../Omics/Epigenomics.html"><span>E</span>pigenomics</a>
        <a href="../Omics/Proteomics.html"><span>P</span>roteomics</a>
        <a href="../Omics/Systeembiologie.html"><span>S</span>ysteembiologie</a>
      </div>
    </li>
    <li class="li-nav"><a class="a-nav" href="../Key Gene.html"><span>K</span>ey Gene</a></li>
    <li class="li-nav"><a class="a-nav" href="../Vacatures.html"><span>V</span>acatures</a></li>
    <li class="li-nav"><a class="a-nav" href="../Interview.html"><span>I</span>nterview</a></li>
    <li class="li-nav"><a class="a-nav" href="../HS Leiden.html"><span>H</span>S Leiden</a></li>
    <li class="li-nav"><a class="a-nav" href="../Bronnen.html"><span>B</span>ronnen</a></li>
  </ul>
</nav>

Answer 4

检查这是否有用。目前我已将下拉菜单放在第一个列表项中。所以请把那个ul放在你想要的地方。

--no-save

a.a-nav {
  color: white;
  font-family: 'Raleway', sans-serif;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 2px;
}

h1.header {
  color: white;
  font-family: 'Lato', sans-serif;
  font-size: 35px;
  line-height: 40px;
  position: relative;
  text-align: center;
}

ul.ulnav {
  list-style-type: none;
  margin: 0 auto;
  padding: 0;
  /* overflow: hidden; */
  width: 90%;
}

li.li-nav a {
  float: left;
  display: block;
  padding: 8px;
  background-color: #269ccc;
  display: inline;
}

span {
  color: #ecbc00;
}

nav {
  text-align: center;
  width: 100%;
  background-color: #269ccc;
  top: 0;
  margin: 0 auto;
  left: 0px;
  right: 0px;
}

nav a:hover {
  background-color: #9ed2c5;
  color: white;
}
li{
  position: relative;
  display: inline-block;
}
ul.dropdown{
  padding:0;
  display: none;
  position: absolute;
  width: 100%;
  top: 100%;
  z-index:1;
  left: 0;
  background: #269ccc;
}
li ul.dropdown li a{
  display: block;
  float: none;
  text-decoration: none;
  color: #fff;
}
li:hover ul.dropdown{
  display: block;
}

您还可以查看此Fiddle

将导航中心链接

4 个答案: