Question

您可以通过不同的方式创建导航标签。水平标签很容易，但垂直标签是不同的怪物。

如果您曾尝试创建垂直导航标签，则可能会遇到编码过程中在UL和DIV标记之间插入中断的情况。我试图删除那个中断，以便UL和DIV标签在同一行，我知道有一个CSS代码可以做到这一点，但我不知道哪个。

我尝试使用white-space: nowrap。它只适用于文本，而不适用于元素。

我尝试了浮动：左侧和右侧有强制边距和宽度，如SO中的问题所示。那也失败了。

我唯一的其他选择是通过以下方式强制修复：

1）使用位置：用手动上下左数字固定

2）将UL和DIV标签放在TABLE中

3）使用jQuery

我想暂时避免使用这三种。

您可以点击此处查看我的演示：http://www.wammyradio.com/personal/stackexchange/testing.html

在此演示中，换行符由HR标记表示。

我使用的正确代码是什么，以便UL和DIV元素在同一条线上（即彼此相邻，在HR线之上），并且它们之间没有中断？

Answer 1

删除<hr>元素。
将display: inline-block;添加到<div class="tabcontents">和<ul class="tabs">元素。
那就是全部。

Answer 2

如果使用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; ..但如果你使用inline-block，ul和div之间会有一些空格

垂直标签：删除UL＆amp;没有jQuery或固定位置属性的DIV Break

2 个答案: