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

给你的链接显示：inline-block或float：left（如果你不希望链接之间有小的差距）

tab-box a {

 display:inline-block;}

Answer 2

尝试此解决方案CODEPEN

<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>

.tab-box {
    border-bottom: 1px solid #666666;
    padding-bottom:5px;
  text-align:center;
}
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; }
.tab-box a {
  display:inline-block;

}

使css菜单显示垂直而不是水平

2 个答案: