[英]How can I make the link divs to fill the navigation container?
I am trying to develop a web page that can be responsive to screen size. 我正在尝试开发一个可以响应屏幕尺寸的网页。 However I cannot figure out a way to do this and to fill the nav div with the link divs. 但是,我无法找出一种方法来用链接div填充导航div。 I have a screen shot below and code to follow. 我下面有一个屏幕截图,后面有代码。 There is also an issue with small screen sizes and the link divs. 小屏幕尺寸和链接div也存在问题。 I would like the divs to shrink with the screen and not stack on top of each other. 我希望div随屏幕缩小,而不是彼此叠放。 At least until a certain point. 至少直到某个点。 Information about this would be helpful as well. 有关此信息也将有所帮助。 Also, explaining why these things happen helps a lot as well so if you like. 另外,解释为什么发生这些事情也很有帮助,所以如果您愿意的话。 Then please tell. 然后请告诉。
HTML: HTML:
<nav id="nav">
<a href="FYFHome.html" ><div id="link"><p>Home</p></div></a>
<a href="FYFHome.html" ><div id="link"><p>Services</p></div> </a>
<a href="FYFHome.html" ><div id="link"><p>Our Customers</p></div></a>
<a href="FYFHome.html" ><div id="link"><p>Contact</p></div></a>
</nav>
CSS: CSS:
#link
{
height: 70%;
width: 25%;
display: inline-block;
border: 1px dotted green;
text-decoration: none;
text-align: center;
padding: none;
}
#nav
{
border: 1px solid black;
width: 100%;
height: 80px;
margin: auto;
}
Here's a JSFiddle 这是一个JSFiddle
25% would fit, but since you add 2 pixels border (1px left and 1px right) to your div, it is too wide. 25%可以容纳,但是由于您在div中添加了2个像素的边框(向左1px,向右1px),因此它太宽了。 The best way to include the border (or padding and margin) is the calc()
function, so use calc(25% - 2px)
. 包括边框(或填充和边距)的最佳方法是calc()
函数,因此请使用calc(25% - 2px)
。 The next issue is the white space between the divs. 下一个问题是div之间的空白。 They are there because of the spaces / line breaks between the elements. 它们之所以存在,是因为元素之间存在空格/换行符。 Just add the end tag of one element in the line of the next one (or simply just the >
) 只需在下一个元素的行中添加一个元素的结束标记(或仅添加>
)
<nav id="nav">
<a href="FYFHome.html"><div id="link"><p>Home</p></div></a
><a href="FYFHome.html"><div id="link"><p>Services</p></div></a
><a href="FYFHome.html"><div id="link"><p>Our Customers</p></div></a
><!-- No more line breaks or spaces between the elements --><a href="FYFHome.html"><div id="link"><p>Contact</p></div></a>
</nav>
To change the CSS for smaller screens just add to your style file 要更改较小屏幕的CSS,只需将其添加到样式文件中
@media screen and (max-width: 320px) {
/* Your CSS for screens smaller than 320px */
}
You can add as many of those as you like, so you could have different CSS-styles for different screen sizes. 您可以根据需要添加任意多个,因此对于不同的屏幕尺寸,您可以具有不同的CSS样式。
Just add float:left
只需添加float:left
*{box-sizing: border-box;} #nav { border: 1px solid black; width: 100vw; height: 80px; margin: auto; } #link { height: 70%; width: 25%; display: inline-block; float: left;/*add this*/ border: 1px dotted green; text-decoration: none; text-align: center; padding: none; }
<nav id="nav"> <a href="FYFHome.html"> <div id="link"> <p>Home</p> </div> </a> <a href="FYFHome.html"> <div id="link"> <p>Services</p> </div> </a> <a href="FYFHome.html"> <div id="link"> <p>Our Customers</p> </div> </a> <a href="FYFHome.html"> <div id="link"> <p>Contact</p> </div> </a> </nav>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.