如何在无序列表中创建与其他列表项相同宽度的列表项?

时间:2015-02-07 01:04:29

标签: javascript html list parent unordered

我的页面有一个包含4个列表项的无序列表,在我的演示中由4个绿色框表示。每行最多应有3个列表项(框),但由于我的演示有4个列表项,因此第4项被推到新行。这会导致第4项扩展父容器的整个宽度。

这是因为list_item_inner正在填充其父级(list_item)宽度的100%,假设为32%(与其他人一样),但它的大小显然与它上面的绿色框。我只需要所有列表项具有相同的宽度,无论是否只有1行。

这是我的demo site

这是列表项的html代码:

      <li class="list__item">
<figure class="list__item__inner">
<a class="divLink" href="http://google.com">
<p class="vignette" style="background-image:url(http://www.albertelli.com/photoarchive/Random_2001/house_medium.jpg)"></p>
<div class="titlebox">Test </div>
<div class="locationbox">Test</div>
        <div class="pricebox">Test</div>
     </a>
    </li>

所有CSS代码都在html文档中。有解决方案吗谢谢!

如果相关,该页面使用FlexWrap webkit,脚本为:

<script>

;( function( $, window, document, undefined )
{
    'use strict';

    var s = document.body || document.documentElement, s = s.style;
    if( s.webkitFlexWrap == '' || s.msFlexWrap == '' || s.flexWrap == '' ) return true;

    var $list       = $( '.list' ),
        $items      = $list.find( '.list__item__inner' ),
        setHeights  = function()
        {
            $items.css( 'height', 'auto' );

            var perRow = Math.floor( $list.width() / $items.width() );
            if( perRow == null || perRow < 2 ) return true;

            for( var i = 0, j = $items.length; i < j; i += perRow )
            {
                var maxHeight   = 0,
                    $row        = $items.slice( i, i + perRow );

                $row.each( function()
                {
                    var itemHeight = parseInt( $( this ).outerHeight() );
                    if ( itemHeight > maxHeight ) maxHeight = itemHeight;
                });
                $row.css( 'height', maxHeight );
            }
        };

    setHeights();
    $( window ).on( 'resize', setHeights );
    $list.find( 'img' ).on( 'load', setHeights );

})( jQuery, window, document );

</script>

这是一个屏幕截图,显示列表项4与其他列表的大小不同。 enter image description here

2 个答案:

答案 0 :(得分:1)

将CSS width属性更改为max-width:

.list__item {
    max-width: 32%;
}

答案 1 :(得分:0)

我看不到一个关闭的数字标签。所以应该是这样的:

<li class="list__item">
    <figure class="list__item__inner">
        <a class="divLink" href="http://google.com">
            <p class="vignette" style="background-image:url(http://www.albertelli.com/photoarchive/Random_2001/house_medium.jpg)"></p>
            <div class="titlebox">Test </div>
            <div class="locationbox">Test</div>
            <div class="pricebox">Test</div>
        </a>
    </figure>
</li>