Question

说我有这个

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

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

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

如何获得ul的实际宽度？

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

Answer 1

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

我认为，鉴于您的问题的性质，您已将display: inline应用于ul，因此DOM的宽度无法读取。

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

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

Example fiddle

要模仿居中列表，您需要找到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>

Answer 2

好吧，试试jquery：

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

您可以为其指定一个值：

$('ul').attr( 'width' , value );

Answer 3

这应该适合你：

$("ul").width()

Answer 4

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

$('ul').width();

<强> See Demo

使用jQuery / JavaScript获取浮动li的ul宽度

4 个答案: