Home/ Questions/Q 9229609
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T05:36:52+00:00

Taken from w3schools (visit link to see what it looks like): <!DOCTYPE html> <html>

  • 0

Taken from w3schools (visit link to see what it looks like):

<!DOCTYPE html>
<html>
  <head>
    <style>
      ul
      {
        float:left;
        width:100%;
        padding:0;
        margin:0;
        list-style-type:none;
      }
      a
      {
        float:left;
        width:6em;
        text-decoration:none;
        color:white;
        background-color:purple;
        padding:0.2em 0.6em;
        border-right:1px solid white;
      }
      a:hover {background-color:#ff3300;}
      li {display:inline;}
    </style>
  </head>

  <body>
    <ul>
      <li><a href="#">Link one</a></li>
      <li><a href="#">Link two</a></li>
      <li><a href="#">Link three</a></li>
      <li><a href="#">Link four</a></li>
    </ul>

    <p>
    In the example above, we let the ul element and the a element float to the left.
    The li elements will be displayed as inline elements (no line break before or after the element). This forces the list to be on one line.
    The ul element has a width of 100% and each hyperlink in the list has a width of 6em (6 times the size of the current font).
    We add some colors and borders to make it more fancy.
    </p>

  </body>
</html>

So, ul and a are float:left;. Now, float says that the next element should float around it, yet the text does not. What am I missing?

Second: Removing the float from the ul makes the text flow around it. What the serious heck?

Third: Removing the inline from li does nothing. Yet, removing the float from a puts whitespace between the elements.

Can anyone even try to explain why these things happen and don’t do what they should?

(Newest Chromium)

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The width of the <ul> is 100%. The text has nowhere to go but below it.

    The reason removing float:left from the <ul> will make the text appear to the right is that the <ul> will not be taking up visual space anymore since the contents are all floated inside a non-floated container. It will be 0px tall, and the <p> will STILL drop down below it because of the 100% width, but you won’t notice it visually. You can test this by giving the <ul> a border and see what happens. The <p> will float next to the last floated <li>.

    <li>s are not inline items. display:inline; and display:block are both incorrect. They are display:list-item;

    • 0