Question

因此，我正在制作一个网站，并制作了一个导航栏，并在其中放置了链接，但是这些链接没有填满导航栏，我如何确保这些链接填满整个栏？因为它们实际上适合我制作的小节，所以请勿让小节继续前进或停留在左侧。

任何帮助将不胜感激

谢谢

Answer 1

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

Answer 2

 .topnav {
     overflow: hidden;
     background-color: blue;
     text-align: center;
     position: relative;
     display:flex;
     justify-content:space-evenly;
     flex-wrap:wrap
}

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

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

Answer 3

将width: 100%授予您的.topnav。

.topnav {
    width:100%
    overflow: hidden;
    background-color: blue;
    text-align: center;
    position: relative;
}

Answer 4

您在这里使用的是基于表的设计。看起来您想在左右两侧留出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>

Answer 5

不确定这是否是您的追求。我只移动了left和right的div，而没有更改其他任何内容

	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>

使链接适合导航栏

5 个答案: