Dan Dan - 4 months ago 6
HTML Question

Floating li components and keeping the ul border

The following code is what I use to style and display a navigation bar at the top of my page. However, there are lines in-between the different

li
elements.



* {
padding: 0;
margin: 0;
}

.top-nav.fixed {
float: right;
position: relative;
right: 50%;
/* or right 50% */
text-align: left;
}
.top-nav.fixed ul {
background: blue;
margin-top: 10px;
position: relative;
left: 50%;
border-style: solid;
border-width: 3px;
border-color: blue;
}
.top-nav.fixed li {
display: inline-block;
background: red;
}
.top-nav.fixed a {
display: block;
padding: 10px;
}
.top-nav ul {
list-style: none;
}
.top-nav a {
text-decoration: none;
}

<nav class="top-nav fixed" role="navigation">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</nav>





In order to fix this, I changed the code to the following.

.top-nav.fixed li {
display: inline-block;
float: left;
background: red;
}


This brought around a new problem. The
ul
border no longer went around the
li
elements. My question; how do you get the
ul
border to go around all the
li
elements as it did before they were floated?



* {
padding: 0;
margin: 0;
}

.top-nav.fixed {
float: right;
position: relative;
right: 50%;
/* or right 50% */
text-align: left;
}
.top-nav.fixed ul {
background: blue;
margin-top: 10px;
position: relative;
left: 50%;
border-style: solid;
border-width: 3px;
border-color: blue;
}
.top-nav.fixed li {
display: inline-block;
float: left;
background: red;
}
.top-nav.fixed a {
display: block;
padding: 10px;
}
.top-nav ul {
list-style: none;
}
.top-nav a {
text-decoration: none;
}

<nav class="top-nav fixed" role="navigation">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</nav>




Answer

use overflow: hidden for the parent

in your case,

.top-nav.fixed ul {
  overflow: hidden;
}

this should help

also, remove inline-block, it's no longer useful in your code when you use float