jQuery手风琴100％宽度
我的wordpress标题上有一个jQuery手风琴。 我注意到手风琴的宽度因浏览器和屏幕宽度而异。
我试图通过向accordion类添加’width：100％’来解决这个问题，但是宽度仍然没有填满屏幕/标题宽度？ 然而，当在’chrome inspect element’中编辑并将’width：100％’插入到手风琴宽度中时，它会起作用，但是100％的css在chrome中被“划掉”？
有人可以协助我做错误吗？ 谢谢
/* Vertical Accordion Style */ .va-container{ position:relative; margin:40px auto 0 auto; top: -47px; left: 0px; width: 100%; } .va-wrapper{ width:100%; height:100%; position:relative; overflow:hidden; background:#000; left: 0px; } .va-slice{ cursor:pointer; position:absolute; width:100%; left:0px; overflow:hidden; } .va-slice-1{ background:#000 url(http://sofzh.miximages.com/jquery/Airfreight22.png) no-repeat center center; } .va-slice-2{ background:#000 url(http://sofzh.miximages.com/jquery/Seafreight2.png) no-repeat center center; } .va-slice-3{ background:#000 url(http://sofzh.miximages.com/jquery/Satellite.png) no-repeat center center; } .va-slice-4{ background:#000 url(http://sofzh.miximages.com/jquery/41.jpg) no-repeat center center; } .va-slice-5{ background:#000 url(http://sofzh.miximages.com/jquery/41.jpg) no-repeat center center; } .va-slice-6{ background:#000 url(http://sofzh.miximages.com/jquery/41.jpg) no-repeat center center; } .va-slice-7{ background:#000 url(http://sofzh.miximages.com/jquery/41.jpg) no-repeat center center; } .va-slice-color-1{ background-color:#97c5eb; } .va-slice-color-2{ background-color:#68ace5; } .va-slice-color-3{ background-color:#0072cf; } .va-slice-color-4{ background-color:#0039a6; } .va-slice-color-5{ background-color:#00338e; } .va-slice-color-6{ background-color:#002c76; } .va-slice-color-7{ background-color:#002144; } .va-title{ font-family: 'Open Sans Condensed', sans-serif; text-transform:uppercase; font-size:40px; margin-left:20px; color:#fff; text-shadow: 0px 0px 1px white; } .va-content{ display:none; margin-left:25px; } .va-slice p{ font-size: 22px; font-style: italic; font-family:Georgia, serif; } .va-slice ul{ margin-top:20px; } .va-slice ul li{ float:left; margin:0px 2px; } .va-slice ul li a{ color:#000; background:#eede2f; padding:3px 6px; font-size:14px; font-family:'PT Sans', sans-serif; text-transform:uppercase; } .va-slice ul li a:hover{ background:#000; color:#fff; text-shadow:none; } .va-nav span{ width:40px; height:25px; background:transparent url(http://sofzh.miximages.com/jquery/prev.png) no-repeat center center; position:absolute; top:-35px; left:50%; margin-left:-20px; text-indent:-9000px; opacity:0.7; cursor:pointer; display:none; z-index:100; } .va-nav span.va-nav-next{ background-image:url(http://sofzh.miximages.com/jquery/next.png); top:auto; bottom:-35px; } .va-nav span:hover{ opacity:1.0; } /* End Additional CSS Styles */ Previous Next $(function() { $('#va-accordion').vaccordion({ visibleSlices : 5, expandedHeight : 250, animOpacity : 0.1, contentAnimSpeed: 100 }); }); 您需要为手风琴设置包装并将包装宽度设置为100％
...stuff... .container {width:100% !important;}
这是因为手风琴宽度基于其包装
您还需要删除.va-container类并将其属性放在.container类中
.container { width:100% !important; position:relative; margin:40px auto 0 auto; top: -47px; left: 0px; }
我把它添加到标题中 – 不确定它是否是正确的方法，但它似乎正在工作
style =“height：450px; width：100％！important;”