我一直在尝试解决类似问题的在线教程和其他Stack Overflow解决方案,有些非常聪明并且非常接近,但没有一个能够处理类似块的悬停效果{display：block;填充：10px 40px;}
a：悬停{background：#ccc;}.其他人使用巧妙的方法创建相同宽度的块链接,这些宽度随窗口调整而变化;但是,这不够精确,我不希望在链接块之间创建相同的宽度,而是在链接之间具有相同的左/右填充.由于链接之间的距离相同,因此更加精确.
我已经放弃了使用CSS做到这一点,也许其他人有一个处理变量填充的解决方案,或者与此非常接近的东西.无论如何,我决定尝试在jQuery中使用它.
我之前从未真正编写任何jQuery,但多年来一直使用多个插件.我认为我至少应该在发布之前尝试提出一些建议.我有它工作,我想知道是否有可能添加它的动态调整,如果用户调整窗口大小,而不仅仅是页面加载.我也想知道他们这样做是否有任何问题.
这是我到达的地方的链接：http://jsfiddle.net/XZxMc/3/
HTML：
<div class="container">
<div class="row">
<div class="twelvecol">
<ul>
<li><a href="#">short</a></li>
<li><a href="#">longer</a></li>
<li><a href="#">even-longer</a></li>
<li><a href="#">really-really-long</a></li>
<li><a href="#">tiny</a></li>
</ul>
</div>
</div>
</div>
CSS：
.container {
background:#ccc;
font-family:arial,helvetica;
}
.row {
width: 100%;
max-width: 700px;
min-width: 600px;
margin: 0 auto;
overflow: hidden;
background:white;
}
.row .twelvecol {
width:100%;
float:left;
}
ul {
text-align:center;
}
ul li {
display:inline-block;
zoom:1;
*display: inline;
}
ul li a {
padding:12px 39px;
display:block;
}
a {text-decoration:none;}
a:hover {background:blue; color:white;}
JavaScript：
// Initial left/right padding of links set in css
var paddingIni = 39;
// Initial max-width of .row
var widthIni = 700;
// Number of links multiplied by 2; 2 because we will be reducing the padding by multiples of 2px total,1px left,1px right
var linkQ = 5*2;
// Current width of link container
var twelveWidth = $(".row .twelvecol").width();
// (Initial width / 10) - (Current width / 10); this gives us how much to subtract from our inital padding of 39
// Is there anything wrong with the way this is written?
var paddingSub = (widthIni/linkQ)-(twelveWidth/linkQ);
// Simply subtracting above computation from our inital padding of 39
var paddingNew = paddingIni-paddingSub;
$("ul li a").css("padding-left",paddingNew);
$("ul li a").css("padding-right",paddingNew);
此外,如果有人不介意解释为什么这不起作用,那么我尝试用一个等式完成所有操作：
var whyisthiswrong = 39 - ( (700/(5*2)) / ($(".row .twelvecol").width()/(5*2)) );
解决方法
<div class='twelvecol'><ul>...</ul></div>
你也可以这样做
<ul id='hmenu' class='twelvecol'>...</ul>
CSS明智你只需要确保你的未排序列表有一个显示块或内联块(因为它是水平的,因此内联).这样你就可以摆脱列表项上的CSS hack如果我是正确的.
根据这篇文章auto resize text (font size) when resizing window?
对于jQuery部分触发窗口调整大小使用：
$(function() {
// trigger once dom is ready
resizeMe();
// trigger on window resize
$(window).bind('resize',function()
{
// your resize function
resizeMe();
}).trigger('resize');
});
var resizeMe = function(){
// your stuff here
};
您可以使用JSON参数字符串一次调整CSS,或者仅使用填充时调整CSS：
$("#hmenu li a").css("padding","12px " + paddingNew + "px 12px " + paddingNew + "px");
要么
$("#hmenu li a").css({"padding-left": paddingNew,"padding-right": paddingNew});
不确定px连接.可能没有必要.
添加了jsfiddle,您可以使用“结果窗口”大小来查看会发生什么：
http://jsfiddle.net/tive/tKDjg/
