Li Float Vs Display: Inline

Is it redundant to use display: inline and float: left together?

Actually there is no need to use both the properties together, but as you are using two classes having respective properties is fine, let me explain you here, if you use display: inline; ONLY, than first you need to see how inline is it different from float

Inline Elements

Floated Elements

Now, yes, am aware that span are already inline elements, but if you see, when I use float, it makes an inline element behave like an inline-block, it applies margins at top and bottom as well, while display: inline; won't.

Another difference is float is in general different positioning, when you float an element to left or right, it creates an empty space besides, which makes element below it to shift besides that.

Floated Example

While display: inline; won't

Inline Example

See the difference? So it depends on you what suits best to your needs, just make sure you clear your floating elements by using overflow: hidden; or any clearfix available out there else you will see some unexpected behavior of your layout.

Conclusion: Even if you use display: inline;, your element will be a block level element and inline, so there's no need to use display: inline;

display: inline | inline-block and float: left | right while using it have any special meaning?

Your assertion that floats are always block boxes is correct. Changing the element to inline or inline-block will have no effect for as long as it is floating.

As to why some websites use both properties together... other than (most likely) a fundamental misunderstanding of floats, the only other scenario I can think of is that display: inline actually serves as a workaround for a bug that affects IE6, but this workaround was relevant a decade ago and should no longer be relevant today, except in legacy sites.

Inline-Block vs. Float - Different widths?

It's simple. If you add a background: red to your li rules you will see that there is a small gap between each li. The gap is not a margin or padding but a whitespace character (a space) which is created when the browser 'collapses' your newlines and tabs. The issue here is your inline elements respect whitespace but floated elements do not.

There are several solutions based on your requirements and how 'hacky' you want to get. You can see them here: Ignore whitespace in HTML

Personally I'd use display:table-cell for my li as it enjoys the best browser support and is the least hacky approach

ul.table {display:table; width:100%}
ul.table > li {display: table-cell; padding: 0; margin:0;}

An equally valid (but less readable) solution would be the remove the whitespace from the source like so:

<ul><li><a href="#">Item #1</a></li><li><a href="#">Item #2</a></li></ul>

This will work in any browser, even IE4. Some people do this with comments to hide the whitespace but I think that's an abuse of comment semantics and still looks ugly in the source anyway.

Display inline or float without breaking - without using media queries

A very simple solution is with Flexbox.
Set the parent element to display type 'flex'.
Also set up flex wrap: wrap // This way the children will wrap if needed.
The children become flex objects. Since I want them to be even, I set them both to flex grow: 1
Set the children to flex-basis as 300px. // This is almost like a minimum width. This triggers the wrap.

body {    padding: 50px;}.main {    background-color: #e9e9e9;    display: flex;    flex-wrap: wrap;}
.main input {    background-color: #e9e9e9;}.one {    flex-grow: 1;    flex-basis: 300px}
.two {    flex-grow: 1;    flex-basis: 300px;}

<head>    <link rel="stylesheet" href="inline.css"></head><body>            <form class="main">
        <input type="text" class="one">        <input type="text" class="two">
    </form>        </body>

Li Float Vs Display: Inline

Is it redundant to use display: inline and float: left together?

display: inline | inline-block and float: left | right while using it have any special meaning?

Inline-Block vs. Float - Different widths?

Display inline or float without breaking - without using media queries

Related Topics

Leave a reply