由于使用jekyll的站点地图插件将站点地图添加到我的网站,robots.txt
在我的菜单列表中显示了不需要的边框。有没有办法删除/隐藏边框?
化身
<nav id="menu">
<ul class="links">
<li><a href="#">Home</a></li>
{% for page in site.pages %} {% if page.layout == "home" or page.url contains ".xml" %} {% else %}
<li><a href="{{ page.url }}">{{ page.title }}</a></li>
{% endif %} {% endfor %}
<ul class="actions">
<li class="content"><a href="#contact" id="contact-btn">Contact</a></li>
</ul>
</ul>
<ul class="actions vertical">
<li><a href="#" class="button special fit">Subscribe to Newsletter</a></li>
</ul>
HTML输出
<!-- Menu -->
<nav id="menu">
<ul class="links">
<li><a href="#">Home</a></li>
<li><a href="/about/">about</a></li>
<li><a href="/archive.html">archive</a></li>
<li><a href="/robots.txt"></a></li>
<ul class="actions">
<li class="content"><a href="#contact" id="contact-btn">Contact</a></li>
</ul>
</ul>
<ul class="actions vertical">
<li><a href="#" class="button special fit">Subscribe to Newsletter</a></li>
</ul>
</nav>
CSS
#menu .inner {
-moz-transition: -moz-transform 0.35s ease-out, opacity 0.35s ease,
visibility 0.35s;
-webkit-transition: -webkit-transform 0.35s ease-out, opacity 0.35s ease, visibility 0.35s;
-ms-transition: -ms-transform 0.35s ease-out, opacity 0.35s ease, visibility 0.35s;
transition: transform 0.35s ease-out, opacity 0.35s ease, visibility 0.35s;
-moz-transform: rotateX(20deg);
-webkit-transform: rotateX(20deg);
-ms-transform: rotateX(20deg);
transform: rotateX(20deg);
-webkit-overflow-scrolling: touch;
max-width: 100%;
max-height: 100vh;
opacity: 0;
overflow: auto;
text-align: center;
visibility: hidden;
width: 18em;
}
a#contact-btn {
width: 18em;
max-width: 100%;
text-align: center;
overflow: hidden;
}
#menu .inner>:first-child {
margin-top: 2em;
}
#menu .inner>:last-child {
margin-bottom: 3em;
}
#menu ul {
margin: 0 0 1em 0;
}
#menu ul.links {
list-style: none;
padding: 0;
}
#menu ul.links>li {
padding: 0;
}
#menu ul.links>li>a:not(.button),
#contact-btn {
border: 0;
border-top: solid 1px rgba(212, 212, 255, 0.1);
display: block;
font-size: 1em;
font-weight: 300;
letter-spacing: 0.25em;
line-height: 4em;
text-decoration: none;
text-transform: uppercase;
}
#menu ul.links>li>.button {
display: block;
margin: 0.5em 0 0 0;
}
#menu ul.links>li:first-child>a:not(.button) {
border-top: 0 !important;
}