垂直标签:删除没有jQuery或固定位置属性的UL和DIV中断

Vertical Tabs: Removing UL & DIV Break Without jQuery Or Fixed Position Property

本文关键字：属性 位置 UL 中断 DIV 定位 删除 标签 jQuery 垂直      更新时间：2023-09-26
您可以通过

不同的方式创建导航选项卡。水平标签很容易，但垂直标签是另一个怪物。

如果您曾经尝试创建垂直导航选项卡，您可能会在编码过程中遇到在 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之间会有一些空间

。
  1. 删除<hr>元素。
  2. 向<div class="tabcontents">和<ul class="tabs">元素添加display: inline-block;。
  3. 就这样。
相关文章：