Question

我无法理解如何移除条带的顶部和底部，这在其他地方是正常的。

    <div class="ma_linenums">
                <div class="ma_linenum">
                    <div class="num">1</div>
                    <div class="text">Provide ship to zip code</div>
                </div>
                <div class="ma_linenum">
                    <div class="num">2</div>
                    <div class="text">Select Box-n-Go storage containers to be shipped</div>
                </div>
                <div class="ma_linenum">
                    <div class="num">3</div>
                    <div class="text">Confirm who will be receiving the shipment</div>
                </div>
                <div class="ma_linenum">
                    <div class="num">4</div>
                    <div class="text">Confirm all the information provided</div>
                </div>      
                <div class="ma_linenum">
                    <div class="num">5</div>
                    <div class="text">Box-n-Go representative will calculate the shipping costs and provide you with a quote</div>
                </div>  
                <div class="ma_linenum">
                    <div class="num">6</div>
                    <div class="text">Once we recive your approval, we will shio the items to you</div>
                </div>  

                <div class="clearfix"></div>        
            </div>

https://jsfiddle.net/h49hsx89/1/

需要结果：http://cs624027.vk.me/v624027836/285ae/thJS61-9ct8.jpg

Answer 1

解决方案：https://jsfiddle.net/x3596yn4/3/

以下将解决它：

.ma_linenums {
  background: url("http://cs624027.vk.me/v624027836/2858b/qWSCfsvYM3I.jpg") repeat-y;
  background-size: 1px 90%;
  background-position: 27px;
  background-repeat: no-repeat;
}

最初你的照片正在重复其容器的整个高度。我通过background-repeat: no-repeat对此进行了限制，并手动将高度设置为250px

如果您想要将线条的高度调整为内容，请将background-size: 1px 250px;更改为background-size: 1px 90%;

Answer 2

我在代码中做了一些更改，并使用伪类来获取所需的结果。看看这个jsfiddle：https://jsfiddle.net/h49hsx89/4/

这是我添加的css使其成为可能：

.ma_linenum:before {
    content : '';
    background: url("http://cs624027.vk.me/v624027836/2858b/qWSCfsvYM3I.jpg") repeat-y;
    height:22px;
    width:1px;
    display:block;
    position:absolute;
    left:13px;
    top:-10px;
}

.ma_linenum:first-child:before {content:'';background:none}

Css背景修复

2 个答案: