Question

我在div中有一个导航栏，我需要导航栏才能流畅。它所在的表基于百分比（100％），最小宽度为800px。我认为我需要的是根据主容器大小调整图像大小。每个图像（家庭，常见问题，推荐......）。我希望图像的宽度和高度在窗口调整到最小（800px）时缩小，以便它仍然可以放在一行中。

#nav-container {
height: 80px;
padding-left:10px;
overflow:auto;
}

ul#nav {
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
ul#nav li a {
background-position: left top;
background-repeat: no-repeat;
display: block;
text-indent: -9000px;
position: absolute;
}
ul#nav:hover li a{
background-position: left bottom;
}
ul#nav li a:hover{
background-position: left center;
}
ul#nav li a span{
background-repeat: no-repeat;
display: none;
position: absolute;
}
ul#nav li a:hover span{
display: block;
}
ul#nav li a.home {
background-image: url(../images/home.gif);
height: 37px;
width: 118px;
top: 10px;
left: 0%;
}
ul#nav a.custom{
background-image: url(../images/home.gif);
height: 37px;
width: 118px;
top: 10px;
left: 13%;

}
ul#nav a.faq{
background-image: url(../images/home.gif);
height: 37px;
width: 118px;
top: 10px;
left: 26%;
}

ul#nav a.testimonails{
background-image: url(../images/home.gif);
height: 37px;
width: 118px;
top: 10px;
left: 40% ;
}

通过给“左”指定百分比而不是按钮之间的距离将在调整窗口大小时发生变化。但是，我需要在按钮之间保持最小距离，这样当窗口移动到最小（800px）时，按钮之间仍然有一段距离，但是当窗口最大化时，距离不会太大。

Answer 1

您可以在CSS中设置元素的最小宽度/最小高度和最大宽度/最大高度。

W3schools - CSS Dimension

例如：

img
{
min-width:150px;
}

您可以尝试使用填充或边距来保持按钮之间的距离，而不是使用“左”。

CSS Margins and Padding

请提供更具体解决方案的现场演示。我建议使用jsfiddle.net等服务。

我希望这会有所帮助。

我需要我的导航菜单才能流畅

1 个答案: