题
我很难思考以下问题的解决方案。
我先来说明一下:
情况
我有 26 个项目(在这个例子中,一般来说数量是未知的..),但一次只能看到 12 个..我还有一些导航元素(绿色框)
紫色和绿色框的宽度是固定的,但紫色的高度可以根据内容而变化。
一切都很正常,我可以用CSS做到这一点。
我正在为我的项目使用无序列表(浮动项目),并且我已指定前两个 <li>
元素作为导航元素。第一个向左浮动,第二个向右浮动。一切正常,其余项目的流动在两个绿色项目之间进行。
问题
但现在我需要将绿色项目放在第二行(或者最后一行,如果这个概念有帮助,因为只有两行)
我希望能够隐藏第一个 X 元素并显示下一个 X,它们会自行就位。
为了重新表述这个问题,我可以以这样的方式定位一些元素(绿色的元素)来控制它们的位置,但仍然允许它们干扰来自新位置的流量吗?
我希望这一点很清楚。如果不问,我会提供尽可能多的信息。
我尝试过但不起作用的事情
- 移动具有负底部边距或正顶部边距的绿色项目。它们将移出其位置,但其他元素不会填补其位置。
- 使用绝对位置,但随后元素会完全从流中删除,并且它们不会影响其他元素,因此它们与其他元素重叠。
[他们变灰的项目是隐藏的,我只是展示它们,这样你就知道它们存在。]
一些帮助您入门的代码
<style type="text/css">
ul,li{padding:0;margin:0; list-style-type:none;}
ul{
width:155px;
position:relative;
height:125px;
border:1px solid red;
}
li{
float:left;
background-color:purple;
margin-left:5px;
margin-top:5px;
width:25px;
text-align:center;
line-height:25px;
color:white;
}
.prev{
color:black;
background-color:green;
}
.next{
color:black;
float:right;
margin-right:5px;
background-color:green;
}
</style>
和
<body>
<ul>
<li class="prev"><</li>
<li class="next">></li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
</ul>
</body>
解决方案
好吧,显然这不能仅用 Css/Html 来解决..
所以,为了解决这个问题,我使用了一些CSS( 内联块 跨浏览器)和一些 jQuery 来移动导航按钮,使它们始终保持在我想要的位置。
这里是解决方案供参考..
CSS
<style type="text/css">
ul,li{padding:0;margin:0; list-style-type:none;}
#performances{
width:155px;
border:1px solid red;
line-height:0;
font-size:0;
}
#performances li{
font-size:12px;
background-color:purple;
margin-left:5px;
margin-bottom:5px;
margin-top:5px;
width:25px;
text-align:center;
line-height:25px;
color:white;
display:none;
vertical-align:top;
}
#performances .prev{
color:black;
background-color:green;
display: -moz-inline-stack;
display:inline-block;
}
#performances .next{
color:black;
background-color:green;
display: -moz-inline-stack;
display:inline-block;
}
#performances .shown{
display: -moz-inline-stack;
display:inline-block;
}
#performances .placeholder{visibility:hidden;}
</style>
<!--[if lte IE 7]><style>
#performances .prev,#performances .next,#performances .shown{zoom:1;*display:inline;}
</style><![endif]-->
JavaScript(jQuery)
<script type="text/javascript">
function resetNextPrev( ){
$next.insertAfter('#performances li.shown:eq('+ ($perpage-1) +')');
$prev.insertAfter('#performances li.shown:eq('+ ($perline-1) +')');
}
$(document).ready(function(){
$perpage = 8;
$perline = ($perpage+2) / 2;
$page = 1;
$itemcount = $('#performances li.performance').length;
$pages = Math.ceil ( $itemcount / $perpage);
$next = $('#performances li.next');
$prev = $('#performances li.prev');
$('#performances li.performance').slice(0,$perpage).addClass('shown');
if (($pages * $perpage) > $itemcount )
for (var i =0;i< ($pages * $perpage)-$itemcount;i++)
$('<li class="performance placeholder">test</li>').appendTo('#performances');
resetNextPrev();
$('li.next').click(function(){
if ($page < $pages)
$('#performances li.performance').filter('.shown').removeClass('shown').end().slice($perpage * (++$page-1),$perpage * $page).addClass('shown');
resetNextPrev( $perline );
});
$('li.prev').click(function(){
if ($page > 1)
$('#performances li.performance').filter('.shown').removeClass('shown').end().slice($perpage * (--$page-1),$perpage * $page).addClass('shown');
resetNextPrev( $perline );
});
});
</script>
..和 超文本标记语言
<ul id="performances">
<li class="prev"><</li>
<li class="next">></li>
<li class="performance">1</li>
<li class="performance">2</li>
<li class="performance">3</li>
<li class="performance">4 dfs s sf</li>
<li class="performance">5</li>
<li class="performance">6</li>
<li class="performance">7</li>
<li class="performance">8</li>
<li class="performance">9</li>
<li class="performance">10</li>
<li class="performance">11</li>
<li class="performance">12</li>
<li class="performance">13</li>
<li class="performance">14</li>
<li class="performance">15</li>
<li class="performance">16</li>
<li class="performance">17</li>
<li class="performance">18</li>
<li class="performance">19</li>
</ul>
里面有几个硬编码的值,但我会把它留给任何可能从中学到新东西的人......
感谢大家的指导:)
工作示例 (对于任何想看到它实际应用的人) : http://www.jsfiddle.net/gaby/Ba3UT/
其他提示
对于如此复杂的情况使用 javascript 可能是值得的。像 jQuery 这样的库可以让它变得非常轻松。在 js 中显式地定义这些包装规则会比用大量 css 规则隐式地定义这些包装规则更清晰、更容易维护。
使 li
除了导航之外 display: inline-block
也许还可以移动导航 li
到列表末尾?
没有看到你的代码我无法确定。但是,您是否尝试过将绿色元素放入标签中并将其标记为清晰:两个都;?不过,这可能会将他们移到第三排。这是你应该检查的东西。