Jquery照片库的CSS样式问题

大家好，这个很棒的社区的每个成员！！！ 我目前特别使用jQuery滑块，它带有标题feauture和缩略图导航剪辑。 我的问题是，当我第一次测试这个图库时，它看起来很完美，但当我将导航剪辑的缩略图插入到当前项目的起始页时，我没有被订购一张挨着另一张。他们被命令一个接一个。因此，在剪辑中，我只能看到第一个缩略图，其他缩略图都隐藏了。 html代码是：

 <div class="sliderkit photosgallery-captions">
 <div class="sliderkit-nav">
 <div class="sliderkit-nav-clip">
 <!---php for-loop that retrieves the thumbnail pics--->
 <ul>
 <li><a href="#"  rel="nofollow" title="[link title]"><img src="<#IMAGE2#>" alt="[Alternative   text]" /></a></li>
 </ul>
 <!---end of loop--->
 </div>

当我将overflow属性更改为visible时，我可以看到所有缩略图都存在，但按垂直顺序排列。 任何建议我应该改变，以解决这将是高度赞赏！

---

感谢您花时间阅读此

把东西放进li会使它们垂直排列。您可以做的是设置css，以显示您希望看到的任何列中的内容。列宽的总和必须小于100%，否则将向下推一列。然后在php中为每个循环添加两个变量。确定照片需要在哪一列（即1、2、3等）并将第二列设置为class=“float-x”，其中x是图像应该在的列。然后您可以将该变量添加到li标记中

比如说

<style type="text/css">
    .float-1 {
    float: left;
    width: 33%;
}
    .float-2 {
    float: left;
    width: 33%;
}
    .float-3 {
    float: left;
    width: 33%;
}
</style>

.浮点数-1{
浮动：左；
宽度：33%；
}
.浮点数-2{
浮动：左；
宽度：33%；
}
.浮点数-3{
浮动：左；
宽度：33%；
}

然后在代码中（这是c#但概念应该与php相似）

var i=1；
@foreach（Model.Application中的var项）
{
var classStyle=“”；
如果（i==3 | | i%3==0）
{
classStyle=“class=float-3”；
}
else如果（i==2 | | i%3==2）
{
classStyle=“class=float-2”；
}
else if（i==1 | | i%3==1）
{
classStyle=“class=float-1”；
}
}

i++；
}

---

这适用于3列，但显然，您可以轻松地将其设置为2列、4列或任意数量的列

把东西放进li会使它们垂直排列。您可以做的是设置css，以显示您希望看到的任何列中的内容。列宽的总和必须小于100%，否则将向下推一列。然后在php中为每个循环添加两个变量。确定照片需要在哪一列（即1、2、3等）并将第二列设置为class=“float-x”，其中x是图像应该在的列。然后您可以将该变量添加到li标记中

比如说

<style type="text/css">
    .float-1 {
    float: left;
    width: 33%;
}
    .float-2 {
    float: left;
    width: 33%;
}
    .float-3 {
    float: left;
    width: 33%;
}
</style>

.浮点数-1{
浮动：左；
宽度：33%；
}
.浮点数-2{
浮动：左；
宽度：33%；
}
.浮点数-3{
浮动：左；
宽度：33%；
}

然后在代码中（这是c#但概念应该与php相似）

var i=1；
@foreach（Model.Application中的var项）
{
var classStyle=“”；
如果（i==3 | | i%3==0）
{
classStyle=“class=float-3”；
}
else如果（i==2 | | i%3==2）
{
classStyle=“class=float-2”；
}
else if（i==1 | | i%3==1）
{
classStyle=“class=float-1”；
}
}

i++；
}

---

这适用于3列，但显然，您可以轻松地将其设置为2列、4列或任意数量的列

首先，谢谢你的回答……我不明白为什么从我在一个新项目中测试相同的php代码和css样式开始，li元素就应该按垂直顺序删除，并且缩略图是按水平顺序显示的。我认为这个问题更可能与css有关。我发现了问题所在…我在

元素中插入了clear:none规则，现在是水平的。很明显，在其他一些css定义中有一些规则被覆盖了，设置得很清楚：tware.Thnax Tom再次回答，思考正确的方向是有帮助的。我想你想要列，但错过了水平显示。是的，默认情况下，LI将垂直显示。我相信，您也可以通过内嵌显示来实现同样的功能。在显示属性是关键之前，我已经用LI做过水平菜单。首先，谢谢你的回答…我不明白为什么LI元素应该按垂直顺序删除，因为我在一个新项目中测试了相同的php代码和css样式，并且缩略图以水平方向显示秩序。我认为这个问题更可能与css有关。我发现了问题所在…我在

元素中插入了clear:none规则，现在是水平的。很明显，在其他一些css定义中有一些规则被覆盖了，设置得很清楚：tware.Thnax Tom再次回答，思考正确的方向是有帮助的。我想你想要列，但错过了水平显示。是的，默认情况下，LI将垂直显示。我相信，您也可以通过内嵌显示来实现同样的功能。在显示属性成为这些菜单的关键之前，我已经使用LI的水平菜单。

<ul>
var i = 1;
@foreach(var item in Model.Application)
{
    var classStyle= "";
    if(i==3 || i%3== 0)
    {
        classStyle = "class=float-3";
    }
    else if(i==2 || i%3 == 2)
    {
        classStyle = "class=float-2";
    }
    else if (i==1 || i%3 == 1)
    {
        classStyle = "class=float-1";
    }
 }
 <li @classStyle><a href="#"  rel="nofollow" title="[link title]"><img src="<#IMAGE2#>" alt="[Alternative   text]" /></a></li>
i++;
}
</ul>