index-menu容器没有被撑开，导致menu-tips直接顶到footer下面去了，显示index-menu为0？
/*菜单menu部分*/
.index-menu{
position:relative;
border-top:4px solid #f34949;
}
.index-menu .menu-tips{
position:absolute;
left:50%;
top:0px;
margin-left:-78px;
width:156px;
height:75px;
text-align:center;
line-height:65px;
color:#fff;
background:#f34949;
}
/*菜单提示标签*/
.index-menu .menu-tips:after{
position:absolute;
content:"";
left:0;
buttom:0;
width:0;
height:0;
border-left:78px solid transparent;
border-right:78px solid transparent;
border-bottom:10px solid #fff;
}
个回答
-
- 慕粉3523303
- 2016-07-15 09:27:42
还是要把.index-menu .menu-tips {}位置的position:absolute;改成position:relative;才能被撑开，你发下你的public-container样式，就这个了，其他的没什么不同
.index-menu{
position:relative;
border-top:4px solid #f34949;
}
.index-menu .menu-tips{
position:relative;
left:50%;
top:0px;
margin-left:-78px;
width:156px;
height:75px;
text-align:center;
line-height:65px;
color:#fff;
background:#f34949;
}
/*菜单提示标签
.index-menu .menu-tips:after{
position:absolute;
content:"";
left:0;
buttom:0;
width:0;
height:0;
border-left:78px solid transparent;
border-right:78px solid transparent;
border-bottom:10px solid #fff;
}
.public-container{
position:relative;
margin:0 auto;
width:1100px;
}
-
- 徐司白3545646
- 2016-07-14 23:33:44
代码是这样的，你看看你会不会哪里写错或者拼写错了
<!--------------------------html-------------------------------->
<div class="index-menu">
<div class="menu-tips">The Menu</div>
<div class="public-container menu-list">
</div>
</div>
/*菜单css部分*/
.index-menu {
position:relative;
border-top:4px soid #f34949;
}
.index-menu .menu-tips {
position:absolute;
left:50%;
top:0;
margin-left:-78px;
width:156px;
height:75px;
text-align:center;
line-height:65px;
color:#fff;
background:#f34949;
}
.index-menu .menu-tips:after {
position:absolute;
content:'';
left:0;
bottom:0;
width:0;
height:0;
border-left:78px solid transparent;
border-right:78px solid transparent;
border-bottom:10px solid #fff;
}
-
- 慕粉3523303
- 2016-07-07 14:52:13
.index-menu .menu-tips{
position:relative;
left:50%;
top:0px;
margin-left:-78px;
width:156px;
height:75px;
text-align:center;
line-height:65px;
color:#fff;
background:#f34949;
}
/*菜单提示标签*/
.index-menu .menu-tips:after{
position:absolute;
content:"";
left:0;
buttom:0;
width:0;
height:0;
margin-top:65px;
border-left:78px solid transparent;
border-right:78px solid transparent;
border-bottom:10px solid #fff;
}
我自己把.index-menu .menu-tips的position属性改为relative后就可以撑开了，使用absolute就不行，倒三角那家了margin-top:65px;属性也可以了，就是不知道老师的为什么可以定位到了
-
- 慕粉3523303
- 2016-07-07 08:51:18
父元素index-menu盒模型的高度为0，子元素menu-tips的盒模型高度为75px，溢出在了外面，试了很多次父元素无法撑开，除非给父元素直接加个高度，不过就算那样的话倒三角形的效果也出不来
-
- 妙言
- 2016-07-06 18:15:42
贴的代码看不出有什么错，你在开发者工具里面看看盒模型，尺寸，位置的信息是否哪里有误。