将列表项拉伸到容器的100%宽度

时间:2014-08-25 17:13:11

标签: jquery html css twitter-bootstrap metro-ui-css

我正在使用bootstrap 3并试图模仿metro ui的stepper插件。我正在尝试使用jQuery放置左侧值,以便我的列表项均匀分布并占用容器的100%,但控制台显示所有值均为0.我的代码:

$(document).ready(function () {

    steps = $(".stepped li"),
    element_width = $(".stepped li").width(),
    steps_length = steps.length - 1,
    step_width = $(steps[0]).width();

    $.each(steps, function (i, step) {
        var left = i == 0 ? 0 : (element_width - step_width) / steps_length * i;

        console.log(steps);
        $(step).animate({
            left: left
        });
    });

});

我找不到我做错了什么,所有左边的值都返回0px。这是我试图模仿的插件的链接:http://tinyurl.com/o6sld95。该列表是一个简单的无序列表。

<ul class="stepped">
    <li class="complete">1</li>
    <li class="complete">2</li>
    <li class="current">3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

3 个答案:

答案 0 :(得分:1)

element_width = $(".stepped li").width()更改为element_width = $(".stepped").width()

您目前正在获取li项的宽度两次,并将其分配给element_widthstep_width,因此当您减去它们时,您会获得0

JSFiddle

答案 1 :(得分:0)

以下是一个简单的CSS解决方案,如果您对此感兴趣: http://jsfiddle.net/u3w0qfaz/1/

第一个版本使用父容器宽度的转换来模拟所需的效果:

ul.stepped {
    display: flex;
    list-style: none;
    flex-wrap: nowrap;
    flex-direction: row;
    transition-duration: 1s;
    width: 1px;
}
ul.stepped li {
    flex: 1 1 auto;
}
ul.stepped.go {
    width: 100%;
}

以下是另一个使用转换对项目产生缩放效果的版本: http://jsfiddle.net/u3w0qfaz/

ul.stepped
{
    /*...*/
    transform: scaleX(0);
    transform-origin: left;
}

ul.stepped.go
{
   transform: scaleX(1); 
}

答案 2 :(得分:0)

如果您使用的是Bootstrap 3,则可以使用Justified Button Nav

Bootstrap 3 + 1 CSS:

ul{
  -webkit-padding-start: 0px;
}


<ul class="stepped btn-group btn-group-justified">
  <li class="complete btn-group">1</li>
  <li class="complete btn-group">2</li>
  <li class="current btn-group">3</li>
  <li class="btn-group">4</li>
  <li class="btn-group">5</li>
  <li class="btn-group">6</li>
</ul>

JsFiddle Example

除非你需要支持只有CSS 2.x的浏览器,否则根本不需要jQuery。

或纯CSS + HTML(几乎是Bootstrap 3如何做到)

.stepped{
    padding: 0;
    display: block;
    width: 100%;
}

.stepped > li {
    display: table-cell;
    border: 1px solid black;
    width: 1%;
}

<ul class="stepped">
  <li class="complete">1</li>
  <li class="complete">2</li>
  <li class="current">3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

JS Fiddle Example