大家,
我第一次使用box-shadow创建了一个汉堡图标,但出于某种原因,只有顶部栏是超链接:http://jsfiddle.net/vq5r0r8j。
标记:<a href="#menu" class="box-shadow-menu"></a>
CSS:
.box-shadow-menu {
position: relative;
}
.box-shadow-menu:before {
content: "";
position: absolute;
top: 10px;
width: 35px;
height: 4px;
background: white;
box-shadow: 0 10px 0 0 white, 0 20px 0 0 white;
}
我们非常感谢您解决此问题的任何帮助。
谢谢!
答案 0 :(得分:1)
您需要将a
设置为display:block
,因为默认情况下a
设置为inline
,您必须同时为height
提供html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
.body {
background-color: #fff;
}
.container {
width: 100%;
}
.header {
width: 100%;
height: 45px;
background-color: #4dc1df;
}
.navicon {
text-align: center;
}
.box-shadow-menu {
position: relative;
display:block; /* NEW */
height:45px; /* NEW */
}
.box-shadow-menu:before {
content:"";
position: absolute;
top: 10px;
width: 35px;
height: 4px;
background: white;
box-shadow: 0 10px 0 0 white, 0 20px 0 0 white;
}
.header-text {
width: 950px;
font-family:;
font-size: 38px;
line-height: 46px;
color: #c44628;
margin: 0 auto;
padding: 20px 0;
}
父母)
片段:
<div class="container">
<div class="header">
<div class="navicon">
<a href="#menu" class="box-shadow-menu"></a>
</div>
</div>
<div class="content">
<div class="header-text"></div>
</div>
session_name()