不同的方式创建导航选项卡。水平标签很容易,但垂直标签是另一个怪物。
如果您曾经尝试创建垂直导航选项卡,您可能会在编码过程中遇到在 UL 和 DIV 标签之间插入中断的情况。我正在尝试删除该中断,以便 UL 和 DIV 标签在同一行中,我知道有一个 CSS 代码可以做到这一点,但我不知道是哪个。
我尝试使用white-space: nowrap
.它仅适用于文本,不适用于元素。
我尝试了浮点数:左和右,强制边距和宽度,如 SO 上的问题中所建议的那样。这也失败了。
我唯一的其他选择是通过以下方式强制修复:
1(使用位置:固定与手动上下数字
2( 将 UL 和 DIV 标签放在表格中
3( 使用 jQuery
我想暂时避免使用这三个。
您可以点击这里查看我的演示: http://www.wammyradio.com/personal/stackexchange/testing.html
在此演示中,换行符由 HR 标记表示。
我应该使用什么正确的代码,以便 UL 和 DIV 元素在同一行上(即,彼此相邻,在 HR 线上方(,并且它们之间没有中断?
如果使用clearfix:,请尝试此操作:
ul.tabs {
border: 2px solid blue;
float: left;
list-style-type: none;
margin: 0;
padding: 0;
width: 10%;
}
div.tabcontents {
border: 2px solid violet;
float: left;
width: 50%;
}
或者在 ul.tabs 中使用 display:inline-block; in place of float:left and vertical-align:top;
。但是如果你使用内联块,UL和div之间会有一些空间
- 删除
<hr>
元素。 - 向
<div class="tabcontents">
和<ul class="tabs">
元素添加display: inline-block;
。 - 就这样。