Arrange nav tabs to single row in css/html - html

Question

Im want to arrange all the nav tabs in a single row (in line with hr element).
I dont want any space between hr element and tabs.
After updating margin-top, for Technical Documentation tab, it seems fine, but for 1st tab , Products tab, still gap seems to be there between the hr.
Gap in the 1st tab
I have the below code like:
UPDATED:
<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"> 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/> 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>
The Css is as:
.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

Solution #1
Remove the margin-top value from the hr element.
hr {
margin-top: 0px;
}
This will retain the margin-bottom value which you may need for spacing.
Solution #2
Alternatively, and I would recommend this, remove the hr element and declare border-bottom on a containing parent element of your list items (li), like .nav, then declare a margin-bottom property if you need bottom spacing.
<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"> 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/> Selector</a>
</li>
<li class="search-list-class">
<a data-toggle="tab" href="#shieldedsmdpower_inductors_series">Quality</a>
</li>
</ul>
</div>
Additional Styles Declared:
.nav {
border-bottom: 1px solid #ccc;
margin-bottom: 10px; /* adjust as per requirement */
}