Why use float: left and display: inline at the same time?

Question

Why use float: left and display: inline at the same time?

Navigation

#1 by (4 votes)
#2 by (1 votes)
#3 by (1 votes)

3

I'm watching a tutorial, where the teacher at a certain point, minute 28 , sets the style of the elements of a ul to create a horizontal navigation bar , and do so using either float:left or display:inline . The problem is that I had yesterday seen that the methods I quoted above are two different methods for getting the horizontal bar, but then why does it use the two contemporaneously?

.mainheader nav ul li{
    float:left; /* li are set to the left of their "brothers"*/
    display:inline;
}

html html5 css css3

asked by anonymous 11.10.2014 / 15:07

3 answers

Ignore the first line Execute jQuery function in dynamically generated table after an AJAX

score 4 · Answer 1

Floating elements usually have a display value implicitly defined as% with%. However, the case of list items is an exception. According to the specification,

In CSS 2.1 it is not defined if block values should assume the computed value list-item or block .

(free translation)

In Chrome, for example , floated list items leave bullets behind. I believe that the intention to include list-item in the rule was precisely to eliminate those bullets , forcing the display: inline floated to assume <li> instead of display: block .

score 1 · Answer 2

Display is to make the element behave as a block or inline according to the box model ... Float already takes the element from the default flow, causing it to float like a layer ... defining the layer by middle of the z-index ... Then you can use for example the two at the same time whenever you want an element behave as a block or inline and still leave the flow

score 1 · Answer 3

These two statements allow the% html% elements to be arranged next to each other, because by default <li> shows an unordered list ( CSS ) or sorted ( <ul> ) whose elements will be one underneath each other.

This will show one item below the other.

<nav>
    <ul>
        <li>Item 01</li>
        <li>Item 02</li>
        <li>Item 03</li>
        <li>Item 04</li>
        <li>Item 05</li>
    </ul> 
</nav>

So an item will appear side by side.

<style>
    /* Remove os pontos dos itens da lista */
    nav ul { list-style:none }

    /* Colocá-os ('<li>') um ao lado do outro - Pode ser um ou outro */
    nav ul li { display:inline; display:inline-block; } 

    /* float: left me parece desnecessário neste caso. */
</style>

<nav>
    <ul>
        <li>Item 01</li>
        <li>Item 02</li>
        <li>Item 03</li>
        <li>Item 04</li>
        <li>Item 05</li>
    </ul> 
</nav>