2

说我有这个

<ul>
  <li>Questions</li>
  <li>Tags</li>
  <li>Users</li>
</ul>

ul { list-style: none }
li { float: left }

基本上，就像上面的菜单一样（Stackoverflow 徽标右侧的“问题标签用户...”）

如何获得实际宽度ul？

目的是让我可以将其对齐ul到右侧或居中。

4

4 回答 4

3

width()在这种情况下，只需使用即可。

不过，我认为，鉴于您问题的性质，您已经申请display: inline了ul它的宽度，因此 DOM 无法读取它的宽度。

在这种情况下，您可以循环遍历li元素并将它们的宽度相加，如下所示：

var ulWidth = 0;
$("li").each(function() {
    ulWidth = ulWidth + $(this).width()
});
alert(ulWidth);

示例小提琴

要模拟居中列表，您需要找到 UL 和集体 LI 标签的宽度。 

<!doctype html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script>
      jQuery(document).ready(function($){
        var w = 0;
        $('ul > li').each(function(){ w+= $(this).width(); });
        $('ul > li:first').css({'margin-left': ($('ul').width()-w)/2+'px'});
      });
    </script>
    <style type="text/css">
      ul,li { margin:0; padding:0; }
      ul { list-style: none }
      li { float: left; }
    </style>
  </head>
  <body>
    <ul>
      <li>Questions</li>
      <li>Tags</li>
      <li>Users</li>
    </ul>
  </body>
</html>
于 2012-10-25T10:05:21.593 回答
0

好吧，试试jquery：

var width = $('ul').attr( 'width );

您可以为其分配一个值，例如：

$('ul').attr( 'width' , value );
于 2012-10-25T10:02:20.960 回答
0

这应该适合你：

$("ul").width()
于 2012-10-25T10:02:49.420 回答
0

您可以使用 jquery .width()来获取ul元素的宽度

$('ul').width();

看演示

于 2012-10-25T10:02:53.450 回答