Question

我已经尝试了很多使它成为100％宽度的滑块。但是你可以从我的博客中看到它从右侧切入。 http://myideakart.blogspot.in/

这是我粘贴在Html / javaScript小部件上的代码

＆＃13;

<style>
/*crawlist.net slider CSS*/

.bx-wrapper {width:100%}
#slider {

    list-style:none;
    padding:0px;
}



.slider-container { 
    background:#fff; 
    width:100%; 
    height:120px;
    z-index: 126;
    padding:0px 0px 43px 0px; 
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    overflow:hidden; 
margin:0px 0px 45px 0px;
}

.newcon { width:100%; margin:0px 0px 43px 0px; overflow:hidden}


#slider img { 
    width:200px; 
    height:125px; 
    margin:0px; 
    display:inline-block;
    border: 1px solid #f5f5f5;    
}

#slider li {
    width:210px
}
/*crawlist.net slider CSS*/
</style>


<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/35622252191/slider.js"></script>
<script type="text/javascript">
          $(document).ready(function(){
             $('#slider').bxSlider({
            ticker: true,

            tickerSpeed: 5000,
 
            tickerHover: true
          });
          });
</script>

        
<div class="newcon">
<!-- crawlist.net slider starts -->
<div class="slider-container">
<ul id="slider">   
<li><a href='http://myideakart.blogspot.in/2016/08/importance-of-social-media-marketing_10.html' title="place hover text" target="_blank"><img src="http://www.typicalfinance.com/wp-content/uploads/2016/07/B2B-Marketing.jpg"/></a></li>

<li><a href='http://myideakart.blogspot.in/2016/08/mark-zuckerberg-celebrated-skip-app.html' title="place hover text" target="_blank"><img src="http://theideamarketing.com/WordPress/wp-content/uploads/2015/04/logo-idea-marketing3-300x214.png"/></a></li>

<li><a href='place link' title="place hover text" target="_blank"><img src="http://i-tul.com/wp-content/uploads/2014/07/SEO_Blog_Tips_On_Going_Viral.jpg"/></a></li>

<li><a href='place link' title="place hover text" target="_blank"><img src="http://btt.bloggertipstrick.netdna-cdn.com/wp-content/uploads/2015/04/blogger-on-page-seo-tips.png"/></a></li>

<li><a href='place link' title="place hover text" target="_blank"><img src="image link"/></a></li>

<li><a href='place link' title="place hover text" target="_blank"><img src="image link"/></a></li>

<li><a href='place link' title="place hover text" target="_blank"><img src="image link"/></a></li>

<li><a href='place link' title="place hover text" target="_blank"><img src="image link"/></a></li>
</ul>   
</div><!-- crawlist.net slider ends --></div>

＆＃13;

Answer 1

导致这种情况有两个问题，首先是Maciej建议的问题，将width: 100%添加到.bx-wrapper和.bx-window，但在HTML标记中，您有{{1}在两个元素上设置属性。这个问题是style="width:840px"属性的优先级高于CSS文件中的优先级（所以它会覆盖你在CSS文件中写的内容），所以你要么必须删除那个标记，要么移动你的style属性。 1}}声明元素width: 100%属性。

Answer 2

您必须添加到.bx-window

width:for example 1200px;

或

width:100%;

所以你必须制作这段代码：

.bx-window{
    width:100%;
}

如何让我的博客帖子滑块100％宽度？

2 个答案: