html - 在 css/html 中将导航选项卡排列为单行

Question

我想将所有导航选项卡排列在一行中(与 hr 元素一致)。

我不希望 hr 元素和制表符之间有任何空格。

更新 margin-top 后，对于 Technical Documentation 选项卡，它似乎很好，但是对于第一个选项卡，Products 选项卡，hr 之间似乎仍然存在差距。

第一个标签中的间隙

我有如下代码:

更新:

<div class="container">
    <ul class="nav nav-tabs search-results-navtab">
        <li class="active search-list-class">
            <a data-toggle="tab" href="#products">Products <br/></a>
        </li>
        <li class="search-list-class">
            <a data-toggle="tab" href="#multilayer_inductors_series">&nbsp;&nbsp;&nbsp;Technical
                <br/>Documentation</a>
        </li>
        <li class="search-list-class">
            <a data-toggle="tab" href="#smdpower_inductors_series">Support</a>
        </li>
        <li class="search-list-class">
            <a data-toggle="tab" href="#molding_inductors_series">Component
                <br/>&nbsp;&nbsp;&nbsp;Selector</a>
        </li>
        <li class="search-list-class">
            <a data-toggle="tab" href="#shieldedsmdpower_inductors_series">Quality</a>
        </li>
    </ul>
    <hr class="search-hr">
</div>

CSS 如下:

.search-hr {
    margin-top: 0px;
}

.search-results-navtab {
    padding-left: 0px;
    margin-left: 32px;
    margin-right: 70px;
    margin-bottom: 1px;
    list-style: none;
    border: 0px !important;
    background-color: white;
}

.search-list-class {
    padding-right: 100px;
}

Answer 1

解决方案#1

从 hr 元素中删除 margin-top 值。

hr {
    margin-top: 0px;
}

这将保留您可能需要的 margin-bottom 值。

解决方案#2

或者，我建议这样做，删除 hr 元素并在列表项的包含父元素上声明 border-bottom (li)，比如 .nav，如果需要底部间距，则声明一个 margin-bottom 属性。

<div class="container">
    <ul class="nav nav-tabs search-results-navtab">
        <li class="active search-list-class">
            <a data-toggle="tab" href="#products">Products <br/></a>
        </li>
        <li class="search-list-class">
            <a data-toggle="tab" href="#multilayer_inductors_series">&nbsp;&nbsp;&nbsp;Technical
                <br/>Documentation</a>
        </li>
        <li class="search-list-class">
            <a data-toggle="tab" href="#smdpower_inductors_series">Support</a>
        </li>
        <li class="search-list-class">
            <a data-toggle="tab" href="#molding_inductors_series">Component
                <br/>&nbsp;&nbsp;&nbsp;Selector</a>
        </li>
        <li class="search-list-class">
            <a data-toggle="tab" href="#shieldedsmdpower_inductors_series">Quality</a>
        </li>
    </ul>
</div>

声明的附加样式:

.nav {
    border-bottom: 1px solid #ccc;
    margin-bottom: 10px; /* adjust as per requirement */
}