时间戳

首页 > 解决方案 > 作为 Main Nav 的一部分的 Spacing 下拉选项的复杂性

html - 作为 Main Nav 的一部分的 Spacing 下拉选项的复杂性

问题描述

我正在为一门课程做最后的项目，在这个学期即将结束时，教授几乎没有帮助我。问题：我设法让侧面的主导航正常工作并在工作下生成一个下拉菜单。下拉菜单也正确旋转，但是选项彼此堆叠。我已经没有想法尝试让它们正确间隔。任何帮助表示赞赏。谢谢你。

#rotate-text {
    text-align: center;
   width: 25px;
   transform: rotate(270deg);
}

.navbar{
    overflow: hidden;
    background-color: aliceblue;
    font-family: cursive;
}
/* Style the links inside the navigation bar */
.topnav a {
    transform-origin: top left;
    transform: rotate(-90deg) translateX(-100%);
    font-family: 'Bevan', cursive;
  float:left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
font-weight: bolder;
  font-size: 20px;
}
.dropdown{
    float: center;
    overflow: hidden;
}
.dropdown .dropbtn {
    transform-origin: top left;
    transform: rotate(-90deg) translateX(-100%);
    font-family: 'Bevan', cursive;
    float:left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-weight: bolder;
    font-size: 20px;  
    border: solid;
    outline: none;
    background-color: inherit;
}
.dropdown-content {
      display: none;
      position: absolute;
      min-width: 160px;
      z-index: 1;
    left: 70px;
}
.dropdown-content a {
      float: none;
      color: #f2f2f2;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      text-align: left;
}

.dropdown:hover .dropdown-content {
  display: block;
}
/* Change the color of links on hover */
.topnav a:hover {
  color:aqua
}
.topnav a.active 
    {
        border-color: cadetblue;
    }
/*-90 rotate
.topnav a: rotate {
    transform: rotate(-90deg);
}
<html>
    <head>
        <link href='finale.css' rel='stylesheet'/>
        <style>
            body{
                background-image: url(BGGradient.png);
                background-repeat:no-repeat;
            }
            #title{
                text-align: center;
                font-family: cursive;
                font-size: 36pt;
                font-weight: bolder;
                color: #f2f2f2;
            }
            #base{
                border: solid;
            }
        </style>
    </head>
    <body>
        <div id="title">
            Zurion Oasis
        </div>
        <div>
            <table height=100% width=100%>
                <tr>
                    <td>
                        <table height=100%>
                            <tr>
                                <td class="topnav" style="height:100px">
                                    <a href="#contact">CONTACT</a>
                                </td>
                            </tr>
                            <tr>
                                <td class="topnav" style="height:100px">
                                    <a href="#about">ABOUT</a>
                                </td>
                            </tr>
                            <tr>
                                <td class="topnav" style="height:100px">
                                    <div class="dropdown" id="work">
                                        <button class="dropbtn">WORK
                                          </button>
                                        <div class="dropdown-content">
                                           <a href="#">Photography</a>
                                              <a href="#">Digital</a>
                                              <a href="#">Physical Medium</a>
                                        </div>
                                      </div> 
                                </td>
                            </tr>
                            <tr>
                                <td class="topnav" style="height:100px">
                                    <a class="active" href="#home">HOME</a>
                                </td>
                            </tr>
                        </table>
                    </td>
                    <td>
                        <div id="base">
                        REST OF PAGE GOES HERE
                        </div>
                    </td>
                <tr>
            </table>
        </div>
    </body>
</html>

视觉画面

标签： htmlcss

解决方案

您需要在代码中更改这两个 css 以消除堆叠问题。

<html>
<head>
    <link href='finale.css' rel='stylesheet'/>
    <style>
        body{
            background-image: url(BGGradient.png);
            background-repeat:no-repeat;
        }
        #title{
            text-align: center;
            font-family: cursive;
            font-size: 36pt;
            font-weight: bolder;
            color: #f2f2f2;
        }
        #base{
            border: solid;
        }
    </style>
</head>
<body>
    <div id="title">
        Zurion Oasis
    </div>
    <div>
        <table height=100% width=100%>
            <tr>
                <td>
                    <table height=100%>
                        <tr>
                            <td class="topnav" style="height:100px">
                                <a href="#contact">CONTACT</a>
                            </td>
                        </tr>
                        <tr>
                            <td class="topnav" style="height:100px">
                                <a href="#about">ABOUT</a>
                            </td>
                        </tr>
                        <tr>
                            <td class="topnavv" style="height:100px" style="">
                                <div class="dropdown" id="work">
                                  <span class="dropbtn">WORK</span>
                                  <div class="dropdown-content">
                                        <a href="#"><p>Photography</p></a>
                                        <a href="#"><p>Digital</p></a>
                                        <a href="#"><p>Physical Medium</p></a>
                                  </div>
                                </div>


                            </td>
                        </tr>
                        <tr>
                            <td class="topnav" style="height:100px">
                                <a class="active" href="#home">HOME</a>
                            </td>
                        </tr>
                    </table>
                </td>
                <td>
                    <div id="base">
                    REST OF PAGE GOES HERE
                    </div>
                </td>
            <tr>
        </table>
    </div>
</body>
  </html>

和CSS：

/* Style the links inside the navigation bar */
  .topnav a {
      transform-origin: top left;
      transform: rotate(-90deg) translateX(-100%);
      font-family: 'Bevan', cursive;
      float:left;
      color: #f2f2f2;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      font-weight: bolder;
      font-size: 20px;
      }

      .topnavv{
       font-family:'Bevan',cursive;
       color: #f2f2f2;
       text-decoration: none;
       font-weight: bolder;
       font-size:20px;
       text-decoration: none;
       vertical-align: inherit;
      }
      .topnavv a{
        transform-origin: top left;
        font-family:'Bevan',cursive;
        color: #f2f2f2;
        text-decoration: none;
        font-weight: bolder;
        font-size:20px;}
      .dropdown {
        position: relative;
        display: inline-block;
        transform: rotate(-90deg) translateX(-50%);}
      .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        padding: 12px 16px;
        z-index: 1;
      }

      .dropdown:hover .dropdown-content {
        display: block;
      }

      /* Change the color of links on hover */
      .topnav a:hover {
        color:aqua
      }
      .topnav a.active
          {
              border-color: cadetblue;
          }
      /*-90 rotate
      .topnav a: rotate {
          transform: rotate(-90deg);
      }

结果： 在此处输入图像描述 编辑：为正确的 css 更新了文件。

推荐阅读