Prev: IE7 on Windows Vista displays half-transparent area as opaque
Next: Photo Gallery: Ping Dorayme
From: shapper on 18 Mar 2010 18:27
Hello,

I am creating an horizontal menu using a unordered list:

<ul class="Menu">
<li>Item 1</li>
<li>Item 2</li>
</ul>

What is the best way to make it horizontal?
Use "display:inline" or "float:left"?

Thank You,
Miguel

From: Ben C on 18 Mar 2010 18:40
On 2010-03-18, shapper <mdmoura(a)gmail.com> wrote:
> Hello,
>
> I am creating an horizontal menu using a unordered list:
>
><ul class="Menu">
> <li>Item 1</li>
> <li>Item 2</li>
></ul>
>
> What is the best way to make it horizontal?
> Use "display:inline" or "float:left"?

Depends what you want, but usually floats. If they're all the same
height, and you want to set the height on them, floats are easier.

If you want them to be subject to the world's most complicated and
widely misunderstood vertical alignment model, display: inline is
better.
From: shapper on 18 Mar 2010 19:04
On Mar 18, 10:40 pm, Ben C <spams...(a)spam.eggs> wrote:
> On 2010-03-18, shapper <mdmo...(a)gmail.com> wrote:
>
> > Hello,
>
> > I am creating an horizontal menu using a unordered list:
>
> ><ul class="Menu">
> >  <li>Item 1</li>
> >  <li>Item 2</li>
> ></ul>
>
> > What is the best way to make it horizontal?
> > Use "display:inline" or "float:left"?
>
> Depends what you want, but usually floats. If they're all the same
> height, and you want to set the height on them, floats are easier.
>
> If you want them to be subject to the world's most complicated and
> widely misunderstood vertical alignment model, display: inline is
> better.

I am not sure about what you mean but my idea is:

If LI contains a single Word (Or short line) then use inline.
If the LI contains text for multiple lines that use Float.

Not?
From: shapper on 18 Mar 2010 19:10
On Mar 18, 10:40 pm, Ben C <spams...(a)spam.eggs> wrote:
> On 2010-03-18, shapper <mdmo...(a)gmail.com> wrote:
>
> > Hello,
>
> > I am creating an horizontal menu using a unordered list:
>
> ><ul class="Menu">
> >  <li>Item 1</li>
> >  <li>Item 2</li>
> ></ul>
>
> > What is the best way to make it horizontal?
> > Use "display:inline" or "float:left"?
>
> Depends what you want, but usually floats. If they're all the same
> height, and you want to set the height on them, floats are easier.
>
> If you want them to be subject to the world's most complicated and
> widely misunderstood vertical alignment model, display: inline is
> better.

Or better:
Float for LI with Fixed width.
Inline for LI with variable width that adapts to content.
From: dorayme on 18 Mar 2010 19:45
In article <slrnhq5ars.42u.spamspam(a)bowser.marioworld>,
Ben C <spamspam(a)spam.eggs> wrote:

> On 2010-03-18, shapper <mdmoura(a)gmail.com> wrote:
> > Hello,
> >
> > I am creating an horizontal menu using a unordered list:
> >
> ><ul class="Menu">
> > <li>Item 1</li>
> > <li>Item 2</li>
> ></ul>
> >
> > What is the best way to make it horizontal?
> > Use "display:inline" or "float:left"?
>
> Depends what you want, but usually floats. If they're all the same
> height, and you want to set the height on them, floats are easier.
>
> If you want them to be subject to the world's most complicated and
> widely misunderstood vertical alignment model, display: inline is
> better.


Perhaps one advantage is that in the inline way you don't have to
worry about excluding the nuisance list item bullets (which can
cause havoc unless careful with floats). Another could be seen as
either an advantage or disadvantage, to wit: in the inline way, a
list item text will wrap (if it is a link, it will be clickable
both before and after the wrap. This is either a further
sub-advantage or sub-disadvantage!). In the float way, internal
text wrap will not happen. Perhaps it could be said that internal
list item text wrapping is more in the spirit of fluid design?

I think I mostly use floats for navigation strips. There are
other advantages I think, but I can't say at this moment. I have
to be *very quick* in these posts now because there are ears
pointing at me.

<http://dorayme.netweaver.com.au/alt/inlineVfloatLists.html>

--
dorayme
 |  Next  |  Last
Pages: 1 2 3 4 5
Prev: IE7 on Windows Vista displays half-transparent area as opaque
Next: Photo Gallery: Ping Dorayme