html - 使CSS菜单显示垂直而不是水平

Question

这是我的 CSS 代码:

.tab-box {
    border-bottom: 1px solid #666666;
    padding-bottom:5px;
}
a.tabLink {
    margin-top: 5px;
}
.tab-box a {
  border:1px solid #666666;
  color:#FFFFFF;
  padding: 0 5px 0 5px;
  text-decoration:none;
  background-color: #eee;
  background:#666666;
  color:#FFFFFF;
  display:block;
}
.tab-box a.activeLink { 
  background-color: #eeeeee;
  color:#666666;
  border-bottom: 0; 
  padding: 5px 15px;
}
.tabcontent {
    padding: 5px;
    width: 99%;
}
.hide { display: none;}
.small { color: #999; margin-top: 100px; border: 1px solid #EEE; padding: 5px; font-size: 9px; font-family:Calibri; }

和我的 HMTL:

<div style="display:inline; float:left; width:18%; border:1px solid black;" class="tab-box">
    <a href="#companyinfo" class="tabLink activeLink">Company</a> 
    <a href="#contacts" class="tabLink">Contacts</a>
</div>

我怎样才能将其更改为垂直显示在页面下方，而不是水平显示？

我已经尝试将 display:block; 添加到 .tab-box a 但这没有任何区别

Answer 1

给你的链接 display:inline-block 或 float:left(如果你不希望链接之间有一个小间隙)

tab-box a {

 display:inline-block;}