javascript - 找到左浮动列表的宽度并应用到包装器 div 以使用 css - jQuery 将其居中？

Question

我希望将 ul 居中放置在 div 中，该 div 是流式布局的左列。为此，我需要设置用于包装 ul 的 div 的宽度。注意:列表项(和内容)是使用 php 从数据库中检索的。

我对您关于如何使用 jquery 执行此操作的建议很感兴趣。

考虑以下标记:

<div id="wrapper">

   <div id="left-column">
     <div id="list-wrap">
       <ul>
        <li>Dynamic content 1</li>
        <li>Dynamic content 2</li>
        <li>Dynamic content 3</li>
        <li>Dynamic content 4</li>
       </ul>
      </div><!--/list-wrap-->
   </div><!--/left-column-->

   <div id="right-column">
     Content
   </div><!--/right-column-->

   <div style="clear: both;"></div>

   </div><!--/wrapper-->

使用这个 CSS:

#wrapper {}
#left-column { float: left; width: 50%; }
#right-column { float: right; width: 50%; }
#list-wrap { margin: 0 auto 0 auto; padding: 40px; }
#list-wrap ul { list-style-type: none; }
#list-wrap ul li { float: left: width 160px; height: 160px; margin: 20px; }

我在 javascript 方面不太聪明，但我认为解决方案需要这样的东西:

1. 找到#left-column 可用内容区域的宽度。
2. 算出多少 li 适合该宽度(考虑到 #list-wrap 的边距和填充)。
3. 将数字四舍五入到最接近的 200 像素(160 像素宽度 + 2x20 像素边距)？
4. 将宽度应用于#list-wrap。

这是我之前使用过的满足一些入门标准的东西:

   var menuWidth = 0;
   $(".menu > ul > li > a").each(function(i) {
     menuWidth += $(this).outerWidth(true);
     });
    $(".menu").css("width", menuWidth);

预先感谢您的帮助，

尼尔斯

Answer 1

你不需要 js 来完成 css 工作!

考虑这种风格:

#wrapper {}
#left-column { float: left; width: 50%; }
#right-column { float: right; width: 50%; }
#list-wrap { margin: 0 auto 0 auto; padding: 40px; }
#list-wrap ul { list-style-type: none; text-align: center; }
#list-wrap ul li { width: 160px; height: 160px; margin: 20px; display: inline-block; }

去掉float: left;对于 li元素并添加 display: inline-block;

最后，添加text-align: center;到 UL使它们居中

我希望这就是您要找的。