如何在无序列表中使列表项与其他列表项宽度相同？

Question

我的页面有一个包含 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 与其他项大小不同的屏幕截图。

Answer 1

将 CSS 宽度属性更改为最大宽度：

.list__item {
    max-width: 32%;
}

Answer 2

我看不到结束数字标记。所以它应该是这样的：

<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>

如何在无序列表中使列表项与其他列表项宽度相同？

How do I make a list item same width as others, within an unordered list?

html

javascript

list

parent

unordered