index-menu容器没有被撑开，导致menu-tips直接顶到footer下面去了，显示index-menu为0？-慕课网

首页课程实战体系课手记专栏慕课教程

index-menu容器没有被撑开，导致menu-tips直接顶到footer下面去了，显示index-menu为0？

来源：4-3 menu

慕粉3523303

2016-07-06 16:20

/*菜单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;

}

写回答关注

5回答

慕粉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;
}

2 1

慕粉3523...

直接复制你的代码试的，发现了倒三角的问题，可是原先的问题还是没法解决

2016-07-15 09:54:48

共 2 条回复 >
徐司白3545646

2016-07-14 23:33:44

代码是这样的，你看看你会不会哪里写错或者拼写错了

<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;
}

1 0

慕粉3523...

找出问题了，倒三角不能直接显示那个是因为把bottom:0;打错成buttom了，但是关于index-menu容器没有被撑开，导致menu-tips直接顶到footer下面去了这个还是需要把position:absolute;改成position:relative;才可以被撑开，直接复制你的代码试的，你发下你的public-container样式看下，是不是哪里不一样了

2016-07-15 09:56:32

共 1 条回复 >
慕粉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;属性也可以了，就是不知道老师的为什么可以定位到了

2 1

徐司白354...

我的按照老师那样做也可以呀，你是不是.index-menu没加relative啊？

2016-07-14 23:27:40

共 2 条回复 >
慕粉3523303

2016-07-07 08:51:18

父元素index-menu盒模型的高度为0，子元素menu-tips的盒模型高度为75px，溢出在了外面，试了很多次父元素无法撑开，除非给父元素直接加个高度，不过就算那样的话倒三角形的效果也出不来

0 0
妙言

2016-07-06 18:15:42

贴的代码看不出有什么错，你在开发者工具里面看看盒模型，尺寸，位置的信息是否哪里有误。

0 0