ansaurus

Question

div containing jquery progress bar inside <ul> list

Answer 1

+3 A:

There are a couple of ways to do this.

#progressbar { display: inline; }

will put it on the same line. I don't know if it has to be display: block or not.

Alternatively, with:

<ul>
  <li class="load">
    <a href="test">test</a>
    <div id="progressbar"></div>
  </li>
</ul>

Try:

li.load { overflow: hidden; }
li.load a, li.load div { float: left; }

although you might need to enclose the items in a div:

<ul>
  <li>
    <div class="load">
      <a href="test">test</a>
      <div id="progressbar"></div>
    </div>
  </li>
</ul>

and then use:

div.load { overflow: hidden; }
div.load a, div.load div { float: left; }

cletus 2009-09-20 02:08:30

Answer 2

A:

You can display them both inline or float them both left, that will get them on the same line.

jeroen 2009-09-20 02:08:31

Answer 3

A:

By "the tag" do you mean the a tag? If so, you can try giving the div a style of display: inline-block. The progressbar plugin might or might not work with that, but if it works, the progress bar should get laid out inline with the a, which is an inline child of the li.

hobbs 2009-09-20 02:09:42

Answer 4

A:

If you don't mind the entire progress bar being a link, you can do the following:

<ul>
  <li>
    <a href="test">
      <div id="progressbar">test</div>
    </a>
  </li>
</ul>

... and the CSS:

div {
  display: block;
  padding: 2px;
}

Or if you need to keep the HTML the way it is try some CSS like this:

li {
  display: block;
  position: relative;
}

li a {
  position: absolute;
  top: 2px;     /* Position as needed */
  left: 2px;
}

li div {
  display: block;
  height: 20px;  /* height and width should be your desired size */
  width: 100px;
}

PHLAK 2009-09-20 05:08:21

Re-read the question, this isn't what you're trying to do, try the float left thing cletus suggested.

PHLAK 2009-09-20 05:15:43

Answer 5

A:

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head runat="server">
    <title></title>
    <style type="text/css">
        li.load a
        {
            display: block;
        }
        li.load a, li.load div
        {
            float: left;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li class="load"><a href="test">test</a>
                <div id="progressbar">

                </div>
            </li>
        </ul>
    </div>
</body>
</html>

Raghav Khunger 2009-09-20 10:46:54

ansaurus

tags:

views:

answers:

div containing jquery progress bar inside <ul> list

related questions