Geek Answers Handbook

I can not get my binding to the top navigation next to each other

I read almost 50 articles on how to get divs or something next to each other with html and css, but I just can't find the error I'm making.

My HTML looks like this:

    <!-- Navigation -->
    <nav>
        <ul>
            <li>
                <a href="#index">aaaaaa</img></a>
            </li>

            <li>
                <a href="#over">bbbbbb</a>
            </li>

            <li>
                <a href="#muziek">cccccc</a>
            </li>

            <li>
                <a href="#gigs">dddddd</a>
            </li>

            <li>
                <a href="#contact">eeeeee</a>
            </li>
        </ul>
    </nav>

And CSS is like this:

nav {
    position:fixed;
    z-index: 100;
    top:0;
    left:0;
    background-color: rgba(0,0,0,0.7);
    width: 100%;
    height: 58px;
}

ul {
    list-style-type: none;
    }

li {
    float: left;
    display: inline-block;
}

a {
    position:fixed;
    top: 0;
    color: #FFFFFF;
    text-decoration: none;
    margin-left: 10%;   
    }

Please note that my navigation bar, as well as the links inside it, are on the sheet at the top. Right now, all the links are stacked on each other in the place where I want the first link. Then I want the links to be next to each other, and not next to each other. Any help would be great :)

Yours faithfully

+4
source share
2 answers

position: fixed a. float: left li (display: inline-block):

nav {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 58px;
}
ul {
  list-style-type: none;
}
li {
  display: inline-block;
}
a {
  top: 0;
  color: #FFFFFF;
  text-decoration: none;
  margin-left: 10%;
}
<!-- Navigation -->
<nav>
  <ul>
    <li> <a href="#index">aaaaaa</a>

    </li>
    <li> <a href="#over">bbbbbb</a>

    </li>
    <li> <a href="#muziek">cccccc</a>

    </li>
    <li> <a href="#gigs">dddddd</a>

    </li>
    <li> <a href="#contact">eeeeee</a>

    </li>
  </ul>
</nav>
Hide result
+3

position:fixed , . position:fixed . , , position:fixed . , .

+1

More articles:


All Articles