how to create navbar without float?


Tags: html,css,html5,css3,navbar

Problem :


I have question about that how to create a navbar without float.
I created something like this:

<div class="wrap">
    <nav>
        <ul class="h">
            <li><a href="#">list numeber 1</a></li>
            <li><a href="#">list numeber 2</a></li>
            <li><a href="#">list numeber 3</a></li>
            <li><a href="#">list numeber 4</a></li>
        </ul>
        <div style="clear: both;"></div>
    </nav>
</div>

with this style:

* {
    padding: 0;
    margin: 0;
}
.wrap {
    width: 800px;
    margin: 100px auto;
}
a{
    text-decoration: none;
}
nav {
    background: yellow;
}

ul {
    list-style: none;
}
li {
    float: left;
    padding: 10px 15px;

}
ul li:hover {
    background: #ffff99;
    border-bottom: 4px solid red;
    padding: 8px 15px;

}

so, i dont like to use <div style="clear: both;"></div> in my design. then i delete the clear div and add some css to my style like this:

ul.h:after {
    content: " ";
    clear: both;
}

but i didnt work!!! :(
how can i fix it using something like above code?

TnX



Solution :

Why not use display:inline-block?

jsFiddle here

HTML

<nav>
  <ul class="h">
     <li><a href="#">list numeber 1</a></li><li><a href="#">list numeber 2</a></li><li><a href="#">list numeber 3</a></li><li><a href="#">list numeber 4</a></li>
  </ul>
</nav>

CSS

li {
    background: red;
    display: inline-block;
    padding: 10px;
    border: 1px solid black;
}

    CSS Howto..

    dynamic drop down how to show success using css (tic icon)

    How do I add an attribute to a specific CSS class?

    How to expand a div to its content width WHEN it is larger than its parent?

    How to override the width property in css [closed]

    How can I add some css to center certain divs if they are using the same css style? [duplicate]

    How to target CSS link with JavaScript

    How do i make a div stick down from his div container?

    How do I make two divs in the same “row” float in different directions?

    How do I specify CSS classes for specific rows in a GridView?

    How to make a square button

    CSS - How to center an image without class or id?

    How do I get the element after my horizontal css navigation bar to appear below it?

    How can I use CSS, Javascript, or a Cookie to disable animation reply on back button?

    How to make a different background for each link from a navbar? [closed]

    how to base a css rule on inherited value of dir attribute

    How to change elements opacity based on if checkbox is or is not checked with CSS only?

    How do I stop css pushing
  • to the right?
  • Resolved - CSS of Blank Theme Does NOT Show My Edits - Why?

    How do I vertically center my navigation bar?

    How to add background-size in css based on image size?

    how to except all elements css inside div with class?

    How to transform an image in SVG (or CSS) into a non-parallelogram shape?

    How to make CSS column not be forced down

    How to float elements with different heights?

    how to select the first element of each class with css

    How to refactor an existing project to use Compass?

    Test if is visible with ng-show attribute

    Hovering over navigation link to show a separate div

    How do i prevent my CSS affecting external plugins?

    How to adjust the height of a series of DIVs by CSS