时间戳

首页 > 解决方案 > 使链接适合导航栏

html - 使链接适合导航栏

问题描述

所以我正在制作一个网站，我已经制作了一个导航栏并将链接放入其中但是链接没有填满栏我如何确保链接填满整个栏？因为它们实际上适合我制作的酒吧，并且不要让酒吧继续前进或留在左边。

任何帮助将非常感激

谢谢你

body {
     margin: 0;
     font-family: Arial, Helvetica, sans-serif;
}
 .logo{
     width: 100px;
     height: 70px;
     background: pink;
}
 .left{
     width: 100px;
     height: 50px;
     background: transparent;
     float: left;
}
 .right{
     float: right;
     width: 100px;
     height: 50px;
     background: transparent;
}
 .topnav {
     overflow: hidden;
     background-color: blue;
     text-align: center;
     position: relative;
}
 .topnav a {
     float: left;
     color: #f2f2f2;
     text-align: center;
     padding: 14px 16px;
     text-decoration: none;
     font-size: 17px;
}
 .topnav a:hover {
     background-color: #ddd;
     color: black;
}
 .topnav a.active {
     background-color: #4CAF50;
     color: white;
}
<html>
   <head>
   </head>
   <body>
      <div>
         <ul>
            <div class="logo"></div>
            <div class="left"></div>
            <div class="right"></div>
            <div class="topnav">
               <a href="vvcb">HOME</a>
               <a href="#news">blalala</a>
               <a href="#contact">HELP</a>
               <a href="#about">ABOUT</a>
               <a href="#about">LOGIN</a>
               <a href="#about">REGISTER</a>
            </div>
         </ul>
      </div>
   </body>
</html>

标签： htmlcss

解决方案

使用 CSS Flexbox，这是一个很好的入门：https ://css-tricks.com/snippets/css/a-guide-to-flexbox/

推荐阅读