                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /从 psd 到 html

好吧，怪我是个细节控

先不说行内元素里面嵌套块元素的问题，menu里面的灰色横线不是固定长度的啊啊啊啊？

qq_普通人_1

2016-07-17

源自：从 psd 到 html 4-3

关注问题我要回答

704

操作

收起

3 回答

johnxie7012
2017-01-22

.menu-item{

float: left;

width: 520px;

height: 40px;

position: relative;

}

.menu-item .title{

position: absolute;

left: 0;

padding-right: 10px;

background: #fff;

z-index: 10;

}

.menu-item .line{

border-top:1px solid #E2E1E1 ;

width: 100%;

position: absolute;

top: 12px;

z-index: 1;

}

.menu-item .price{

position: absolute;

right: 0;

height: 40px;

width: 98px;

text-align: center;

color: #555555;font-size: 16px;

background: #fff;

z-index: 10;

}

1 回复有任何疑惑可以回复我~

收起回答

慕粉4116480
2016-10-20

如果楼主跟我一样发现原PSD里和视频里的横线效果压根不一样,视频里是定长,而PSD里没有定长这个意思吗?

解决方法很简单,menu-item设为relative,line设为100%长度,price和menu-title设为absolute然后定长宽再定位到左右.

这样最后的效果就是line的长度撑满整个父元素,但是会被price和menu-title两个块给挡住一部分,最后看起来就是line不定长.

0 回复有任何疑惑可以回复我~

收起回答

Juching
2016-07-20

<!-- HTML 给它一个line类  这是那根线 -->
              <div class="line"></div>
/* CSS 给它一个width属性就好了 （.index-menu .menu-item 是上层标签的类）*/
    .index-menu .menu-item .line{
          margin-top: 12px;
          width: 150px;
          border-top: 2px solid #ccc;
    }

1 回复有任何疑惑可以回复我~

收起回答