html – 矩形div内的Fit按钮_html-js-css

概述对于网站设计,我正在制作一个位于顶部的导航栏,允许用户快速查看网站提供的内容.在下图中,我以图形方式显示了问题 #navBar { 位置：绝对的; 上：140px; 左：460px; 宽度：980px; 身高：200p 对于网站设计,我正在制作一个位于顶部的导航栏,允许用户快速查看网站提供的内容.在下图中,我以图形方式显示了问题

          #navbar {
              位置：绝对的;
              上：140px;
              左：460px;
              宽度：980px;
              身高：200px;
              background-color：rgb(246,246,246);
              溢出：隐藏;

}      li {          List-style: none;      }      .navbutton {          position: absolute;          top: 65px;          left: 0px;          wIDth: 350px;          height: 75px;          background-color:rgb(18,65,91);          color: white;          margin-left: 0px;          display:inline-block;          text-align: center;          -moz-transform: rotate(270deg);          -moz-transform-origin: 50% 50%;          -webkit-transform: rotate(310deg);          -webkit-transform-origin: 50% 50%;          Font-weight: bold;      }      div span {          position: relative;          top: 15px;          Font-size: 29px;      }      .navbutton:nth-of-type(1):before {          content:"";          position:absolute;          height:170px;          wIDth:350px;          background-color:rgb(18,91);          top:-165px;          left:-50px;      }      .navbutton:nth-of-type(8):after {          content:"";          position:absolute;          height:170px;          wIDth:350px;          background-color:rgb(18,91);          top:65px;          left:50px;      }      div span {          position: relative;          top: 15px;          Font-size: 29px;      }      .buttonContent {          position: absolute;          right: 200px;          top: 50px;          background-color: #F2F2F2;          wIDth: 300px;          visibility: hIDden;      }      .buttonContent a {          text-decoration: none;          color: black;          Font-weight: bold;      }      .buttonContent a:hover {          color: rgb(18,91);      }      .navbutton:hover > .buttonContent {          visibility: visible;      }      </style>    <div ID="navbar" >      <table>         <tr>           <td>            <ul>                  <li>                    <div  > <span> Getting Started  </span>                        <div > <a href="#"> More about Partner Portal</a>                            </br>   <a href="#"> discover 3DSWYM</a>                            </br>                        </div>                    </div>                    <div  ><span> Our Solutions  </span>                         <div > <a href="#"> Industry Sales Kits</a>                            </br>   <a href="#"> Brand Sales </a>                            </br>   <a href="#"> Other Product lines </a>                            </br>   <a href="#"> discover R2014x</a>                            </br>   <a href="#"> discover R2014x</a>                            </br>   <a href="#"> Packagin & Portfolio 2014x</a>                            </br>                        </div>                    </div>                    <div  ><span> Sales </span>                        <div > <a href="#">Agreements & PolicIEs</a>                            </br>   <a href="#">Pricing</a>                            </br>   <a href="#">Online Services</a>                            </br>   <a href="#">3DEXPERIENCE Platform</a>                            </br>   <a href="#">Sales Support R2014x</a>                            </br>                        </div>                    </div>                    <div  ><span> Marketing </span>                        <div > <a href="#">Marketing R2014x</a>                            </br>   <a href="#">Marketing & Communication</a>                            </br>   <a href="#">Campaigns in-a-Box</a>                            </br>   <a href="#">Marketing Online Services </a>                            </br>   <a href="#">branding Materials</a>                            </br>   <a href="#">Solutions Partner Labels</a>                            </br>                        </div>                    </div>                    <div  ><span>   Customer Support                       </span>                         <div > <a href="#">Our Mission</a>                            </br>   <a href="#">Roles & ResponsibilitIEs</a>                            </br>   <a href="#">Support Resources</a>                            </br>   <a href="#">Dassault Systemes Partners Support Tool</a>                            </br>                        </div>                    </div>                    <div  ><span> Training </span>                         <div > <a href="#"> Training Programs</a>                            </br>                        </div>                    </div>                    <div  ><span> Technical Resources </span>                         <div > <a href="#">Pre-Sales Support R2014x</a>                            </br>   <a href="#">VS Sales KickOff 2014 Presentations</a>                            </br>   <a href="#">V6 Deployment Optimizations</a>                            </br>   <a href="#">Dsx.clIEnt Portal</a>                            </br>   <a href="#">3DSWYM CommunitIEs</a>                            </br>                        </div>                    </div>                    <div  ><span> Contact Us </span>                     </div>                </li>                <li></li>            </ul>        </td>    </tr>    </table>   </div>

所以我使用@BeatAlex帮助我的修改版本,
小提琴如下

The jfiddle Link！

现在你可以看到,有一个div类：’buttonContent’,它出现在每个相应的navbutton下面,现在由于溢出隐藏属性而被隐藏

解决方法你可以做溢出：隐藏;在#navbar上;

JSFiddle

或者增加宽度以使其更加对角线并移除边界半径.

JsFiddle

并且所有位都是彩色的：

JsFiddle

总结

以上是内存溢出为你收集整理的html – 矩形div内的Fit按钮全部内容，希望文章能够帮你解决html – 矩形div内的Fit按钮所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。