2

私はこれを持っていると言う

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

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

基本的に、上記のメニューと同じように（Stackoverflowロゴの右側にある「QuestionsTagsUsers ...」）

の実際の幅を取得するにはどうすればよい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 に答える