Question

我正在尝试为我的wordpress页面创建自定义滑块。我已经开始通过JSFiddle创建它，然后我将它插入到我的主题中，但似乎有一些其他类或css代码，它们与滑块相关，所以它不会得到相同的外观。通过检查元素可以看到这一点吗？或者我怎么能接近这个，因为我似乎无法找到问题？

滑块的JSFiddle是正确的

http://jsfiddle.net/2patspw2/530/

以下是wordpress页面的链接，我已将其添加到

http://ggwp.dk/test

正如你所看到的那样，它首先没有居中，然后就是底线。

HTML：

<div class="demo">
    <ul id="demo" class="content-slider">

        <li>
            <div class="slider-content">
                <h3 class="center lead league-name">Liga BBVA</h3>
                <div class="row center">
                    <div class="xs-4">
                        <img src="http://demo.themeum.com/sportsline/wp-content/uploads/2013/11/151.png" alt="Barcelona">
                        <strong>Copenhagen Wolves</strong>
                    </div>
                    <div class="xs-center">
                        <p class="score">3 - 1</p>

                    </div>
                    <div class="xs-4">
                        <img src="http://demo.themeum.com/sportsline/wp-content/uploads/2013/11/131.png" alt="Granada">
                        <strong>Yoe Flash Wolves</strong>
                    </div>
                </div>
            </div>
        </li>
        <li>
            <div class="slider-content"><h3>2</h3></div>
        </li>
        <li>
            <div class="slider-content"><h3>3</h3></div>
        </li>
        <li>
            <div class="slider-content"><h3>4</h3></div>
        </li>
        <li>
            <div class="slider-content"><h3>5</h3></div>
        </li>

    </ul>
</div>

CSS：

.content-slider ul {
    list-style: none outside none;
    padding-left: 0;
}
.content-slider li {
    text-align: center;
    color: #FFF;
}
.content-slider {
}
.content-slider .slider-content {
    margin: 0;
    padding: 60px 20px;
      display: inline;
}
.demo {
    position: relative;
    overflow: hidden;
    width: 357px;
    background:url('http://tnuqq21kt870t8n1egkbrmbr.wpengine.netdna-cdn.com/wp-content/uploads/2014/10/MLG-Championship-Anaheim-2014-Crowd-Enrique-Espinoza.jpg') no-repeat;
    background-size: cover;
}
.lSSlideOuter .lSPager.lSpg{
    background:#FFF;
}


.league-name {
  margin-bottom: 0;
}

.center {
  text-align: center;
}

.row {
  margin-left: -15px;
  margin-right: -15px;
}
.xs-4 {
  width: 40%;
    float: left;
}

.xs-center {
  width: 20%;
    float: left;
}

.xs-4 img {
  margin: 10px 0;
  width: 64px;
  height: 64px;
}

.xs-4 strong {
  display: block;
  font-size: 14px;
}

.xs-center .score {
  font-size: 36px;
  line-height: 36px;
  font-weight: bold;
  margin-top: 20px;
}

.lSSlideOuter .lSPager.lSpg {
  background: #FFF;
  margin-right: -1px;
}

Answer 1

你是对的，有模板CSS可以覆盖你的风格。您必须添加以下属性：

.post-content .content-slider {
    margin:0;
}

.post-content .slider-content h3 {
    color:#fff;
}

Answer 2

试试这个，

行号3554 包含以下css样式..您重置此css，

.post-content ul {
margin-left : 21px 
}

添加css，

.post-content ul#demo  {
    margin-left : 0px 
    }

或改变

.post-content ul {
    margin-left : 0px 
    }

Wordpress css类会干扰滑块

2 个答案: