2017-09-24 8 views
0

これは私が<ul>の幅を得ることができない問題です。ULの幅を取得

htmlファイル:

<ul> 
    <li>image goes here</li> 
    <li>image goes here</li> 
    <li>image goes here</li> 
</ul> 

CSSファイル:

ul { 
    display: inline-block; 
    white-space: nowrap; 
} 

li { 
    width: 90px; 
    height: 90px; 
    display: inline-block; 
} 

ここでは、jQueryのコードの例です:

$(document).ready(function(){ 
    var $width = $('ul').width(); 
    console.log('width: ' + $width); 
}); 

それはULの幅を取得する方法0を返しますか?

答えて

0

は属性としてwdithCSS機能cssを使用してください:リチウムにインラインblock`:

$('ul').css("width"); 

$(document).ready(function() { 
 
    var $width = $('ul').css("width"); 
 
    console.log('width: ' + $width); 
 
});
ul { 
 
    display: inline-block; 
 
    white-space: nowrap; 
 
} 
 

 
li { 
 
    width: 90px; 
 
    height: 90px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li>image goes here</li> 
 
    <li>image goes here</li> 
 
    <li>image goes here</li> 
 
</ul>

+0

を私は 'ディスプレイを忘れてしまいました。 –

+0

@BatgerelEnkhbat私のソリューションもうまく動作しています^^でも、あなたが幸運を逃したものを見つけたことをうれしく思っています –

関連する問題