Wie kann man den Abstand bei einem Inline-Block verändern?

  • Nabend allerseits!

    ich habe folgendes Problem:
    Ich möchte eine horizontale Navigation via CSS machen. Ich habe versucht diese über einen Inline-Block zu machen. Zwischen den Elementen ist jetzt aber ein fester Abstand, der eigentlich nicht da sein soll. Außerdem habe ich ein das Problem, dass sofern ich 33% als Wert für die Elemente eingebe, die Navi teilweise nicht mehr als Inline angezeigt wird.
    Meine Idee war es, dass je ein Element 30% einnimmt und dann also 5% Zwischenraum zu den anderen sind.
    Wie kann ich nun also diesen festen Abstand weg machen und anstatt dessen das selber definieren?

    Und hier ist der wichtige CSS Teil:


    • /*Navigation*/
    • #main_nav {
    • position: relative;
    • float: none;
    • padding-top: 2%;
    • text-align: left;
    • }
    • #main_nav ul li {
    • display: inline-block;
    • border: 0px;
    • width: 30%;
    • }
    • #main_nav ul li a {
    • display: block;
    • padding-left: 10%; /*Abstand der Worte*/
    • line-height: 1.3em;
    • color: #fcfeff;
    • text-decoration: none;
    • }
    • #main_nav ul li:nth-child(2) a{
    • background-color: red;
    • float: center;
    • }
    • /*Navigation ENDE*/


    Ich hoffe ihr könnt mir helfen :)

    Einmal editiert, zuletzt von Jolka89 (31. Juli 2012 um 13:30)