Issue
<html>
<head>
<link type="text/css" rel="stylesheet" href="./style.css">
<title>
Practice
</title>
</head>
<body>
<header class="main">
<div>
Gokul
</div>
<nav class="main-nav" >
<ul class="item">
<li class="items">
<a href="/" class="brand">Home</a>
</li>
<li class="items">
<a href="/" class="brand">Contact</a>
</li>
</ul>
</nav>
</header>
</body>
</html>
Here is the css on codepen https://codepen.io/gauntletww/pen/VwdjNBz
I am trying to align the home and contact on right but the text-align:right; Isn't working on them! I would be glad if someone could address what the problem and give a short answer for solving it.
Solution
Update your:
.main-nav
{
display : inline-block;
text-align: right;
}
with:
.main-nav
{
display : inline-block;
text-align: right;
float:right;
}
EDIT: Or another approach is based on @SigurdMazadi answer (to avoid warnings): By using flexbox and css properties that he used:
header.main {
display: flex;
justify-content: space-between;
}
under the justify-content: space-between; add following line:
align-items:center;
UPDATE REGARDING TO USING FLOAT:RIGHT;:
In general it's better idea and better approach to this to use flexbox. But, everyone have to make decisions on what they're going to use depending on their project.
I mean, yes I suggested using float:right;, but the float property will take the elements out of the normal document flow. This could lead to a mess on webpage and it could shift the rest of the elements under the floated elements so they will be partially visible or won’t be visible at all. -> There's solution for that by using following property: clear: both; after floated element(s), but in general better idea to solve this is to use flexbox.
Answered By - str1ng
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.