Kleber Mota Kleber Mota - 5 months ago 16
CSS Question

Alignment of items from navbar

In my recent project, I have an view named index.html with a code like this:

<body>
<header>
<ul>
<li><a th:href="@{/}" class="title">Loja</a></li>
<li><a href="#">blablabla</a></li>
<li><a href="#">blablabla</a></li>
<li><a href="#">blablabla</a></li>
</ul>
<ul class="right">
<li><a href="#" class="user"/>username</li>
<li><a th:href="@{/admin}">admin</a></li>
<li><a th:href="@{/logout}">logout</a></li>
</ul>
</header>
</body>


the css style for the header is like that:

header ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

header ul.right {
float:right;
}

header li {
float: left;
}

header li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family: 'Oxygen Mono';
}

header li a:hover {
background-color: #111;
}

header li.active {
background-color: #4CAF50;
}


When I open this page in the browser, the items placed on the right side are being display in another line (see: https://jsfiddle.net/klebermo/ch6gtj3p/). Anyone knows what I could change in the css for fix that?

Answer

Because the left menu bar isn't floated. You should add:

header ul {
    float: left;
}

And set the background color of the header tag instead:

header {
    background-color: #333;
    overflow: hidden;
}
Comments