Looking for Li how to arrange horizontally and automatically fill ul, while Li width average? Information, there is a reference to "please use JS dynamic calculation to ensure compatibility",
Because I want to achieve is, the horizontal scroll bar, UL's superior div is fixed width of 1000px, I think with jquery to get each Li's height, the width of the UL is equal to the width of each li.
1 <!DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd ">2 <HTMLxmlns= "http://www.w3.org/1999/xhtml">3 <Head>4 <title>Index.html</title>5 <Metaname= "description"content= "Hello World">6 7 <!--jQuery 1.7.2+ or zepto.js 1.0+ -8 <Scriptsrc= "Http://ajax.useso.com/ajax/libs/jquery/1.9.1/jquery.min.js"></Script>9 Ten <styletype= "Text/css"> One #category{ A width:1000px; - Height:54px; - Border:1px solid Red; the Overflow-x:Auto; - overflow-y:Hidden; - } - #category ul{ + margin:0px; - padding:0px; + List-style:None; A /**float:left, and Overflow:hidden; is to let the width of the UL for the actual width, the specific difference, I still want to learn **/ at Overflow:Hidden; - } - #category ul Li{ - float: Left; - margin:0px 10px; - padding:10px; in Border:Red; - } to + </style> - the </Head> * <Body> $ <DivID= "category">Panax Notoginseng <ul> - <Li>Test</Li> the <Li>Test12321321</Li> + <Li>Test111</Li> A <Li>Test11</Li> the <Li>Test</Li> + <Li>Test</Li> - <Li>Test</Li> $ <Li>Test</Li> $ <Li>Test</Li> - <Li>Test</Li> - <Li>Test</Li> the <Li>Test</Li> - <Li>Test</Li>Wuyi <Li>Test</Li> the </ul> - </Div> Wu <Scripttype= "Text/javascript"> - JQuery (function($){ About varUl_width= 0 ; $ $("#category ul Li"). each (function(index,value) { - varwidth=$ (value). width (); - //40 is Padding-left + padding-right + margin-left + margin-left - Ul_width+=(Width+ +); A //console.log (width); + }); the $("#category ul"). Width (ul_width); - }); $ the </Script> the </Body> the </HTML>View Code
The end result is:
Li horizontally arranges and fills UL automatically
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
