好吧，怪我是個(gè)細(xì)節(jié)控
先不說行內(nèi)元素里面嵌套塊元素的問題，menu里面的灰色橫線不是固定長度的啊啊啊??？
qq_普通人_1
2016-07-17
3 回答
舉報(bào)
0/150
提交
取消
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;
}
2016-10-20
如果樓主跟我一樣發(fā)現(xiàn)原PSD里和視頻里的橫線效果壓根不一樣,視頻里是定長,而PSD里沒有定長這個(gè)意思嗎?
解決方法很簡單,menu-item設(shè)為relative,line設(shè)為100%長度,price和menu-title設(shè)為absolute然后定長寬再定位到左右.
這樣最后的效果就是line的長度撐滿整個(gè)父元素,但是會被price和menu-title兩個(gè)塊給擋住一部分,最后看起來就是line不定長.
2016-07-20
<!--?HTML?給它一個(gè)line類??這是那根線?--> ??????????????<div?class="line"></div> /*?CSS?給它一個(gè)width屬性就好了?（.index-menu?.menu-item?是上層標(biāo)簽的類）*/ ????.index-menu?.menu-item?.line{ ??????????margin-top:?12px; ??????????width:?150px; ??????????border-top:?2px?solid?#ccc; ????}