我需要我的导航菜单是流体

Question

我有一个导航栏在div中，我需要导航栏是流体。它所在的表格基于百分比（100％），最小宽度为800像素。我认为我需要的是根据主容器大小调整图像大小。每个图像（家庭，常见问题，推荐...）。当窗口调整到最小（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等服务。

我希望这会有所帮助。