html – 如何让导航栏(以及其他东西)在右边结束

概述所以我的导航栏出了问题.我把它的宽度设置为100％.但我希望看到结束,因为它有圆角…… 所以这样：| (=======)| 不像现在这样：| (========== | #nav { height: 60px; font-size: 30px; line-height: 60px; vertical-align: middle; 所以我的导航栏出了问题.我把它的宽度设置为100％.但我希望看到结束,因为它有圆角……

所以这样：| (=======)|

不像现在这样：| (========== |

#nav {      height: 60px;      Font-size: 30px;      line-height: 60px;      vertical-align: mIDdle;      text-align: center;      background-color: #0080FF;      wIDth: 100%;      border: 10px solID #16044E;      border-radius: 20px;      z-index: 1;    }    #nav ul {} #nav li {      display: inline;      text-align: center;      margin: 20px;    }    #nav a {      color: white;      text-@R_403_3489@: none;    }

<ul ID="nav">  <li><a href="">Home</a>  </li>  <li><a href="">Courses</a>  </li>  <li><a href="">Subjects</a>  </li>  <li><a href="">Sign Up</a>  </li>  <li><a href="">Log In</a>  </li></ul>

解决方法 您可以使用calc从总宽度减少10px(10px = border-wIDth)但是您应该尝试使用Box-sizing：border-Box,因为浏览器对calc的支持是有限的 Caniuse

#nav {    height: 60px;    Font-size: 30px;    line-height: 60px;    vertical-align: mIDdle;    text-align: center;    background-color: #0080FF;    wIDth: calc(100%-10px);    border: 10px solID #16044E;    border-radius: 20px;    z-index: 1;}#nav ul {}#nav li {    display: inline;    text-align: center;    margin: 20px;}#nav a {    color: white;    text-@R_403_3489@: none;}

<ul ID="nav">            <li><a href="">Home</a></li>            <li><a href="">Courses</a></li>            <li><a href="">Subjects</a></li>            <li><a href="">Sign Up</a></li>            <li><a href="">Log In</a></li></ul>

总结

以上是内存溢出为你收集整理的html – 如何让导航栏(以及其他东西)在右边结束全部内容，希望文章能够帮你解决html – 如何让导航栏(以及其他东西)在右边结束所遇到的程序开发问题。

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