1

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

任何帮助将非常感激

谢谢你

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>

4

5 回答 5

2

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

于 2019-02-21T17:13:09.443 回答
1 
 .topnav {
     overflow: hidden;
     background-color: blue;
     text-align: center;
     position: relative;
     display:flex;
     justify-content:space-evenly;
     flex-wrap:wrap
}

对 topnav 类进行上述更改。它正在使用弹性盒。您可以在此处参考 flexbox 的 CSS 技巧指南： https ://css-tricks.com/snippets/css/a-guide-to-flexbox/

工作示例：https ://jsfiddle.net/srijan1709/7s6hpok9/3/

于 2019-02-21T23:14:27.283 回答
0

给width: 100%你的.topnav。

.topnav {
    width:100%
    overflow: hidden;
    background-color: blue;
    text-align: center;
    position: relative;
}
于 2019-02-21T17:14:05.590 回答
0

您在这里使用的是基于表格的设计。根据您的代码，您似乎希望左右各有 100px 的边距，并让条形图占据其余的宽度。

我删除了那些额外的 div 和相应的样式，并添加了 CSS 来满足您的要求。那里有一些可选的 CSS 会随着视口变窄而调整文本大小，因此您可以在其中放置更多链接更长的时间...我不确定您为什么希望栏的一部分消失...但这是一个开始。（另外，你的 HTML 中有一些语法问题，我已经清理过了。）

<html>
<head>
<style type="text/css">
        body {
            margin: 0;
            font-family: Arial, Helvetica, sans-serif;
        }

        .logo{
            width: 100px;
            height: 70px;
            background: pink;
        }

        .topnav {
            overflow: hidden;
            text-align: center;
            position: relative;
            margin : 0px 100px ; 
            height : 45px ; 
        }

        .topnav a {
            float: left;
            color: #f2f2f2;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
            font-size: 17px;
            background-color: blue;
            height : 25px ; 

        }

        .topnav a:hover {
            background-color: #ddd;
            color: black;
        }

        .topnav a.active {
            background-color: #4CAF50;
            color: white;
        }

/* 
        @media screen and (max-width : 800px) {
            .topnav a {
                font-size : 1.5vw ; 
            }
        }
        @media screen and (max-width : 600px) {
            .topnav a {
                font-size : 9px ; 
            }
        }
 */

</style>
</head>
<body>
<div>
    <ul>
        <div class="logo">
        </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>
于 2019-02-21T17:55:24.210 回答
0

不确定这是否是你的追求。我只移动了 divleft并right没有改变其他任何东西

	body {
				margin: 0;
				font-family: Arial, Helvetica, sans-serif;
			}
			.logo{

				width: 100px;
				height: 70px;
				background: pink;
			}


			.left{
				width: 100px;
				height: 50px;
				background: red;
				float: left;
			}

			.right{
				float: right;
				width: 100px;
				height: 50px;
				background: red;
			}

			.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;
			}
  <div>
			 <ul>
        <div class="logo"></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>
        <div class="left"></div>
				<div class="right"></div>
        </ul>
		</div>

于 2019-02-21T18:10:39.173 回答