如何解决bootstrap CSS问题？

Question

这是实际输出

如何在实际输出中删除红色突出显示的部分？

这是我的预期输出

JSFiddle Demo link

实施例，

.wizard ul
{
    list-style: none outside none;
    padding: 0;
    margin: 0;
    width: 4000px;
}


    .wizard ul li
    {
        float: left;
        margin: 0;
        padding: 0 20px 0 30px;
        line-height: 35px;
        position: relative;
        background: #f5f5f5;
        color: #d0d0d0;
        font-size: 12px;
        cursor: default;
        -webkit-transition: all .218s ease;
        -moz-transition: all .218s ease;
        -o-transition: all .218s ease;
        transition: all .218s ease;
    }

        .wizard ul li .chevron
        {
            border: 24px solid transparent;
            border-left: 14px solid #d4d4d4;
            border-right: 0;
             border-width: 18px 0 17px 14px;
            display: block;
            position: absolute;
            right: -14px;
            top: 0;
            z-index: 1;
        }

            .wizard ul li .chevron:before
            {
                border: 24px solid transparent;
                border-left: 14px solid #f5f5f5;
                border-right: 0;
                content: "";
                display: block;
                position: absolute;
                right: 1px;
                top: -24px;
                -webkit-transition: all .218s ease;
                -moz-transition: all .218s ease;
                -o-transition: all .218s ease;
                transition: all .218s ease;
            }

        .wizard ul li.complete
        {
            background: #f5f5f5;
            color: #444;
        }

            .wizard ul li.complete:before
            {
                display: block;
                content: "";
                position: absolute;
                bottom: 0;
                left: 0;
                right: -1px;
                height: 2px;
                max-height: 2px;
                overflow: hidden;

                z-index: 10000;
            }

            .wizard ul li.complete:hover
            {
                background: #eee;
                cursor: pointer;
            }

                .wizard ul li.complete:hover .chevron:before
                {
                    border-left: 20px solid #eee;
                }

            .wizard ul li.complete .chevron:before
            {
                border-left: 20px solid #f5f5f5;
            } 

        .wizard ul li.active
        {
            background: #428bca;
            color: #262626;
        }

            .wizard ul li.active:before
            {
                display: block;
                content: "";
                position: absolute;
                bottom: 0;
                left: 0;
                right: -1px;
                height: 2px;
                max-height: 2px;
                overflow: hidden;                     
                z-index: 10000;
            }

            .wizard ul li.active .chevron:before
            {
                border-left: 14px solid #428bca;
            }

        .wizard ul li .badge
        {
            margin-right: 8px;
        }

        .wizard ul li:first-child
        {
            -webkit-border-radius: 2px 0 0 0;
            -webkit-background-clip: padding-box;
            -moz-border-radius: 2px 0 0 0;
            -moz-background-clip: padding;
            border-radius: 2px 0 0 0;
            background-clip: padding-box;
            padding-left: 20px;
        }
    /**/
</style>


    <div data-target="#simplewizardinwidget-steps" class="wizard" id="simplewizardinwidget">
        <ul class="steps">
            <li class="complete" data-target="#simplewizardinwidgetstep1">Personal Information<span class="chevron"></span></li>
            <li data-target="#simplewizardinwidgetstep2" class="complete">Qualification<span class="chevron"></span></li>
            <li data-target="#simplewizardinwidgetstep3" class="active">Profile<span class="chevron"></span></li>
            <li data-target="#simplewizardinwidgetstep2" class="complete">Qualification1<span class="chevron"></span></li>
            <li data-target="#simplewizardinwidgetstep2" class="complete">Qualification2<span class="chevron"></span></li>
        </ul>
    </div>

请帮我实现这个目标..

Html Part

Answer 1

添加溢出：隐藏;到.wizard ul

 .wizard ul
    {   overflow: hidden;
        list-style: none outside none;
        padding: 0;
        margin: 0;
        width: 4000px;
    }
     

        .wizard ul li
        {
            float: left;
            margin: 0;
            padding: 0 20px 0 30px;
            line-height: 35px;
            position: relative;
            background: #f5f5f5;
            color: #d0d0d0;
            font-size: 12px;
            cursor: default;
            -webkit-transition: all .218s ease;
            -moz-transition: all .218s ease;
            -o-transition: all .218s ease;
            transition: all .218s ease;
        }
         
            .wizard ul li .chevron
            {
                border: 24px solid transparent;
                border-left: 14px solid #d4d4d4;
                border-right: 0;
                 border-width: 18px 0 17px 14px;
                display: block;
                position: absolute;
                right: -14px;
                top: 0;
                z-index: 1;
            }

                .wizard ul li .chevron:before
                {
                    border: 24px solid transparent;
                    border-left: 14px solid #f5f5f5;
                    border-right: 0;
                    content: "";
                    display: block;
                    position: absolute;
                    right: 1px;
                    top: -24px;
                    -webkit-transition: all .218s ease;
                    -moz-transition: all .218s ease;
                    -o-transition: all .218s ease;
                    transition: all .218s ease;
                }

            .wizard ul li.complete
            {
                background: #f5f5f5;
                color: #444;
            }

                .wizard ul li.complete:before
                {
                    display: block;
                    content: "";
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    right: -1px;
                    height: 2px;
                    max-height: 2px;
                    overflow: hidden;
                     
                    z-index: 10000;
                }

                .wizard ul li.complete:hover
                {
                    background: #eee;
                    cursor: pointer;
                }
                 
                    .wizard ul li.complete:hover .chevron:before
                    {
                        border-left: 20px solid #eee;
                    }

                .wizard ul li.complete .chevron:before
                {
                    border-left: 20px solid #f5f5f5;
                } 

            .wizard ul li.active
            {
                background: #428bca;
                color: #262626;
            }
             
                .wizard ul li.active:before
                {
                    display: block;
                    content: "";
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    right: -1px;
                    height: 2px;
                    max-height: 2px;
                    overflow: hidden;                     
                    z-index: 10000;
                }

                .wizard ul li.active .chevron:before
                {
                    border-left: 14px solid #428bca;
                }

            .wizard ul li .badge
            {
                margin-right: 8px;
            }

            .wizard ul li:first-child
            {
                -webkit-border-radius: 2px 0 0 0;
                -webkit-background-clip: padding-box;
                -moz-border-radius: 2px 0 0 0;
                -moz-background-clip: padding;
                border-radius: 2px 0 0 0;
                background-clip: padding-box;
                padding-left: 20px;
            }

 
<br/>
 
<br/>
<div data-target="#simplewizardinwidget-steps" class="wizard" id="simplewizardinwidget">
                <ul class="steps">
                    <li class="complete" data-target="#simplewizardinwidgetstep1">Personal Information<span class="chevron"></span></li>
                    <li data-target="#simplewizardinwidgetstep2" class="complete">Qualification<span class="chevron"></span></li>
                    <li data-target="#simplewizardinwidgetstep3" class="active">Profile<span class="chevron"></span></li>
                    <li data-target="#simplewizardinwidgetstep2" class="complete">Qualification1<span class="chevron"></span></li>
                    <li data-target="#simplewizardinwidgetstep2" class="complete">Qualification2<span class="chevron"></span></li>
                </ul>
            </div>