1

我希望将 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);

在此先感谢您的帮助，

尼尔斯

4

4 回答 4

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使它们居中

我希望这就是你要找的。

于 2010-01-24T13:37:24.033 回答
0

jQuery width 函数已经返回可用区域。有了这个，我认为你想要做的是相当简单的：

var ulWidth = $("#list-wrap ul li").width();
$("#list-wrap").width(Math.floor(($("#left-column").width() - 80) / ulWidth) * ulWidth);

如果您想通用并计算相关的填充和边框，请参阅问题“ jQuery 中元素的总宽度（包括填充和边框） ”。

于 2010-01-24T12:26:17.840 回答
0

要获取任何元素的宽度，请使用：

var width = $('.selector').width();

要设置任何元素的宽度，请使用：

$('.selector').width( width );
于 2010-01-24T12:26:50.037 回答
0

jQuery解决方案：

这不是编写代码的最佳方式，我这样做是为了给你一个想法：

$(function() {
    var availableWidth = $("#list-wrap").width();
    var liWidth = $("#list-wrap ul li").outerWidth(true);
    var numberOfListItem = parseInt(availableWidth/liWidth);
    var newWidth = numberOfListItem*liWidth;
    $("#list-wrap").width(newWidth);
});

注意：在css中添加一个margin：0；填充：0；到 ul

你可以在这里查看：http: //jsbin.com/uxaho/3/edit

于 2010-01-26T23:59:39.197 回答