Why won't my nav lis display horizontally with floats?

Question

I'm new to coding and trying to figure out why my nav li's will not display horizontally? I've tried a few things which I've noted in the code below.

The catch here is, I must use floats instead of flexbox.

 header nav>* { float: left; width: 7%; margin: 0 5%; padding-bottom: 30px; list-style: none; text-decoration: none; } header nav ul li { width: 100px; float: right; display: block; text-decoration: none; /*margin-left: 2px; display: inline; not working*/ }

 <header> <nav> <a href="#">Courses</a> <form action=""> <input type="text" placeholder="Search"> </form> <img class="icon" src="#"> <h2>Tech Academy</h2> <ul id="SideBar"> <li><a href="#">Donate</a></li> <li><a href="#">Login</a></li> <li><a href="#">Sign up</a></li> </ul> </nav> </header>

I have tried changing the specificity to a class or id and that hasn't fixed anything. I should also note that 'text-decoration' is not working for the li but is working for the a 'courses'? * border: box-sizing is also at the top of the css sheet.

This is what it looks like on the browser

I am very new to coding and this one has had me stumped for hours. T

Answer 1

First of all, spacings between attributes in html files have no effect at all on the browser display, and same for spacing in css files.

The second thing, I'm not sure why you don't want to use flex (it's handy here - you set the display of the parent attribute (ul) to display: flex; flex-direction: row; and it will do the trick).

But if you don't want to use it, there are 2 other tricks:

#1

 ul { display: contents; /* this will make the parent act like it doesn't exist - and then do whatever you want with the children*/ } li { display: inline-block; }

 <ul id="SideBar"> <li><a href="#">Donate</a></li> <li><a href="#">Login</a></li> <li><a href="#">Sign up</a></li> </ul>

#2 grid

 ul { display: grid; grid-template-columns: max-content max-content max-content; /*instaed of max-content, you can assign the width you want for each li*/ } li { margin: 5px; list-style: none; }

 <ul id="SideBar"> <li><a href="#">Donate</a></li> <li><a href="#">Login</a></li> <li><a href="#">Sign up</a></li> </ul>

Answer 2

You can use flexbox to arrange them either column or row . Declaring display: flex; should apply what you're trying to do. See the snippet below:

 header nav>* { float: left; width: 7%; margin: 0 5%; padding-bottom: 30px; list-style: none; text-decoration: none; } header nav ul li { width: 100px; float: right; display: block; text-decoration: none; /*margin-left: 2px; display: inline; not working*/ } #SideBar{ display: flex; gap: 5px; }

 <header> <nav> <a href="#">Courses</a> <form action=""> <input type="text" placeholder="Search"> </form> <img class="icon" src="#"> <h2>Tech Academy</h2> <ul id="SideBar"> <li><a href="#">Donate</a></li> <li><a href="#">Login</a></li> <li><a href="#">Sign up</a></li> </ul> </nav> </header>

More on flexbox here .

Answer 3

Use this on css.....

#SideBar{
display: flex;
}

Answer 4

 header nav>* { float: left; /*width: 7%;*/ margin: 0 5%; padding-bottom: 30px; list-style: none; text-decoration: none; } header nav ul li{ width: 100px; float: right; /*display: block;*/ text-decoration: none; margin-left: 2px; display: inline; }

 <header> <nav> <h2>Tech Academy</h2> <ul id="SideBar"> <li><a href="#">Donate</a></li> <li><a href="#">Login</a></li> <li><a href="#">Sign up</a></li> </ul> </nav> </header>

The problem

• is you have used width: 7%; to header nav>*

Weird one

• its weird that you have used display: block; along with display: inline;

Solution

• I have commented the The problem and Weird one ,run the snippet it should work