与边框底部
问题描述:
我想包括一个底部边框图像(箭头,159px宽)菜单冲突。 像这样:与边框底部
但问题是,该<li>
不能得到159px的宽度。
有什么招数来表示图像边界,不推其他<li>
走呢?
LG cgee
的<li>
的代码:
.sub_menu ul li {
float: left;
font-family: 'Open Sans',sans-serif;
font-weight: bold;
height: 41px;
margin-right: 20px;
margin-top: 10px;
}
的有源元件的代码:
.sub_menu ul .active {
background-image: url("../images/sub_menu_border_active.png");
background-position: center 17px;
background-repeat: no-repeat;
position: relative;
z-index: 100;
}
答
Google Analytics ' 类: '.sub_menu_arrow { 背景图像:URL(” ../图像/ sub_menu_border_active .PNG“); background-position:center 17px; bottom:-4px; display:block; height:19px; 剩余:50%; 保证金左:-75px; position:absolute; width:160px; }' –
cgee
有几种可能为你实现预期结果:
- 您可以添加
min-width: 159px
李。 - 您可以使用
position: absolute
和bottom: 0
在li
(例如span
)中添加其他元素。您将需要添加overflow: visible
到li
为好。 - 下图:
CSS
.sub_menu ul .active {
position: relative;
z-index: 100;
overflow: visible;
}
.sub_menu ul .active:after {
content: '';
background-image: url("../images/sub_menu_border_active.png");
background-position: center 17px;
background-repeat: no-repeat;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -80px;
height: ...;
width: 159px;
z-index: 101;
}
+0
1.作品,但不是我的目标:/ 2不工作? ... – cgee
+0
尝试第3版。 –
+0
'
您需要张贴代码重现您的问题或问题只会得到封闭。 – Archer
我做到了。我包括第三张照片了。 – cgee
你也可以尝试使用CSS3的形状...... –