Question

我正在尝试在ul li标签中添加一个jquery进度条。

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

我使用display：block作为锚标签，我为div标签尝试了相同但没有运气。 div元素显示在锚标记下方。我希望进度条与锚标签位于同一行。

劳伦

Answer 1

有几种方法可以做到这一点。

#progressbar { display: inline; }

会把它放在同一条线上。我不知道是否必须显示：阻止与否。

或者，用：

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

尝试：

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

虽然你可能需要将这些项目包含在div中：

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

然后使用：

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

Answer 2

您可以将它们显示为内嵌或左侧浮动，这将使它们在同一条线上。

Answer 3

“标签”是指a标签吗？如果是这样，您可以尝试为div提供display: inline-block样式。 progressbar插件可能也可能不适用，但是如果它有效，则进度条应该与a内联布局，li是{{1}}的内联子项。

Answer 4

如果您不介意将整个进度条作为链接，则可以执行以下操作：

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

...和CSS：

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

或者，如果你需要保持HTML的方式尝试一些像这样的CSS：

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;
}

Answer 5

<html xmlns="http://www.w3.org/1999/xhtml">
<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>

div包含<ul> list </ul>中的jquery进度条

5 个答案: