Układanie się linków w nawigacji jeden obok drugiego.

Question

Cześć, tworząc stronę spotkałem się z problemem, który nie wiem za bardzo jak rozwiązać.

Moja nawigacja na stronie którą przygotowuję wygląda tak wygląda tak w praktyce: https://scr.hu/wPAOWv

a tak w kodzie html: 

<ul class="topnav">
  <li><a href="TS3">Ts3</a></li>
  <li><a href="Inne">Inne</a></li>
  <li><a href="kontakt">Kontakt z administratorem</a></li>
  <li><a href="aktualności">Aktualności</a></li>
  <li><a href="adminpanel">Panel Administratora</a></li>
  <li><a href="forum">Forum</a></li>
  <li class="icon">
    <a href="javascript:void(0);" onclick="myFunction()">&#9776;</a>
  </li>
</ul>

i css:

@media screen and (max-width:680px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: center;
  }
}
ul.topnav {
    list-style-type: none;
    margin-left:center;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

ul.topnav li {float: center;}

ul.topnav li a {
    display: inline-block;
	margin-left:auto;
	margin-right:auto;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}

ul.topnav li a:hover {background-color: #111;}

ul.topnav li.icon {display: none;}

I problem jest w tym że nawigacja układa się jedna pod drugą a chcę aby była wyśrodkowana i linki żeby były obok siebie :/. Macie jakieś pomysły?

Answer 1

ul.topnav li a {
    display: inline-block;
    margin-left:auto;
    margin-right:auto;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}

Przenieś ten 

display: inline-block;

do ul.topnav li

Comments

Nie działa za dobrze :/ : https://scr.hu/pPWK57

Chodzi o to żeby była ta lista na środku a nie od lewej

Kod CSS:
@media screen and (max-width:680px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: center;
  }
}
ul.topnav {
    list-style-type: none;
    margin-left:center;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

/* Float the list items side by side */
ul.topnav li {
display: inline-block;
}

/* Style the links inside the list items */
ul.topnav li a {
    margin-left:auto;
    margin-right:auto;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of links on hover */
ul.topnav li a:hover {background-color: #111;}

/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}

 

---

text-align: center do ul.topnav

---

działa :D

Answer 2

Możesz skorzystać z tego menu ostatnio zrobiłem bo takie pytanie padło na tym forum.

http://codepen.io/jaca121212/pen/ONGKXW

A nie ma takich znaczników jak:

-float: center;

-margin-left:center;

float: none;

Comments

Sprawdziłem to menu co zrobiłeś i nie polecam, może zrobie forka i wrzuce co imo powinno być poprawione :)

edit// mój fork http://codepen.io/mitelak/pen/MyNgBd/ ogólnie to nie rozumiałem tej idei wrzucenia każdego "Link $" do osobnej listy, tutaj poprawiłem głównie to
ps ta animacja co ją dodajesz jquery to okropna jest :D