我正在构建菜单,最后一项“立即预订”略微倾斜(向下推)。我所做的只是添加一个边框,这似乎打破了完美的水平对齐。有什么方法可以解决这个问题吗?
HTML:
<div class="navibar">
<a class="logo" href="#">Logo</a>
<ul class="left-bar">
<li>
<a href="#">ACCOMMODATIONS</a>
</li>
<li>
<a href="#">DINING</a>
</li>
<li>
<a href="#">SPA & WELLNESS</a>
</li>
<li>
<a href="#">MEETINGS & EVENTS</a>
</li>
<li>
<a href="#">ADVENTURES</a>
</li>
</ul>
<ul class="right-bar">
<li>
<a class="btn btn-ghost" href="#">BOOK NOW</a>
</li>
</ul>
<div style="clear:both"></div>
</div>
CSS:
* {
list-style: none;
margin: 0px;
padding: 0px;
text-decoration: none;
}
.navibar {
margin: 0 auto;;
width: 1100px;
background: rgba(18, 23, 26, 0.4);
padding: 20px;
}
.navibar li a {
color: white;
display: inline-block;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 20px;
padding-right: 20px;
}
.logo {
float:left;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
padding-right: 100px;
}
.navibar li {
float: left;
}
.left-bar {
float: left;
}
.right-bar {
float: right;
}
.btn:link,
/*Prevents color change when clicked */
.btn:visited {
/*<a> is a inline element which doesn't allow padding, so need to change to inline-block */
/* 10 on top and bottom and 30 left and right */
font-weight: 300;
word-spacing: 3px;
font-family: brandon-grotesque;
text-decoration: none;
/*Takes away line on bottom of words */
transition: background-color 0.2s, border 0.2s, color 0.2s;
/* makes color subtly change instead of instantly. More applealing */
}
.btn-full:link, .btn-full:visited {
background-color: #fff;
/* From flat UI colors */
border: 1px solid #fff;
color: #fff;
margin-right: 10px;
}
.btn-ghost:link, .btn-ghost:visited {
border: 2px solid #fff;
color: #fff;
}
我可能错了,但我很确定Borders不会添加填充或边距。
填充文本,因为Stack Overflow说我需要更多文本。真的吗?
答案 0 :(得分:1)
只需使用带有负边框宽度的margin-top
.btn-ghost:link, .btn-ghost:visited {
border: 2px solid #fff;
margin-top: -2px;
color: #fff;
}
在边框之前它们已对齐,但2px边框将元素向下推2px。如果您愿意,可以向上移动项目或向其他项目添加不可见的边框或边距