div, содержащий индикатор выполнения jquery внутри списка <ul> - PullRequest
Новая
       13

div, содержащий индикатор выполнения jquery внутри списка <ul>

0 голосов
/ 20 сентября 2009

Я пытаюсь добавить индикатор выполнения jquery внутри тега ul li. 

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

Я использую display: block для тега привязки, и я попробовал то же самое для тега div, но безуспешно. Элементы div отображаются под тегом привязки. Мне бы хотелось, чтобы индикатор выполнения находился на одной строке с тегом привязки.

Laurent

Ответы [ 5 ]

3 голосов
/ 20 сентября 2009

Есть несколько способов сделать это. 

#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; }
0 голосов
/ 20 сентября 2009 
<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>
0 голосов
/ 20 сентября 2009

Если вы не возражаете, что весь индикатор выполнения является ссылкой, вы можете сделать следующее: 

<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;
}
0 голосов
/ 20 сентября 2009

Под тегом вы подразумеваете тег a? Если это так, вы можете попробовать присвоить div стиль display: inline-block. Плагин ProgressBar может или не может работать с этим, но если он работает, индикатор выполнения должен быть расположен в строке с a, который является встроенным потомком li.

0 голосов
/ 20 сентября 2009

Вы можете отобразить их как встроенные, так и плавающие влево, чтобы получить их на одной строке.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...