标签: html-lists

我使用CSS来使无序列表ul像这样水平显示

 <div id="header">
     <ul>
        <li class="header-li">....</li>
        <li class="header-li" style="width: 200px; display: inline-block;">
                            ...                                
        </li>                            

     </ul>
 </div>

这是我的CSS

#header
{ 
    height: 30px;
    width: 985px;
    padding: 0px 10px 0px;
    vertical-align: middle;
    display: inline-block;
    font-size: 14px;
    overflow: hidden;
}
#header ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    list-style-image: none;
}

.header-li{
    display: inline;    
    padding-right: 20px;
}

display:inline是帮助水平显示我的列表,这在FF,Safari和Chrome上工作,但在IE8上不起作用.请帮助这里是一些屏幕截图显示Firefox外观和IE外观之间的差异

所以我有一个包含大量项目的列表,如下所示:

<ul id="usersList">
   <li><FORM><INPUT class="eButton" type="button" value="robot669394444" onClick="openWin('robot669394444',1280,720)"></FORM></li> 
   <li><FORM><INPUT class="eButton" type="button" value="robot6693925" onClick="openWin('robot6693925',1280,720)"></FORM></li> 
</ul>

我想使用jQuery将所有INPUT值都放入数组中.怎么办这样的事情？

我正在学习CSS,并且只是想知道在编写CSS时哪种方式最好:

div.divname 要么 .divname

ul#menu 要么 #menu ul

等等

我想像所有其他菜单一样设置游戏菜单的高度,但它不起作用.怎么了？

这是我的代码:

<ul class="menu">
   <li class="item-474 current active"><a href="/">News</a></li>
   <li class="item-482 deeper parent">
      <span class="separator">Applications</span>
      <ul>
         <li class="item-483"><a href="games.html">Games</a></li>
      </ul>
   </li>
   <li class="item-484"><span class="separator">Appearence</span></li>
</ul>

#left-menu ul.menu {
  display: block;
  list-style-type: none;
  margin-left: -40px;
}

#left-menu ul.menu li {
  display: block;
  text-align: center; 
  background: url("img/menu1.png");
  width: 208px;
  height: 31px;
  text-align: center;
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

#left-menu ul.menu li ul li {
  display: block;
  text-align: center; 
  background: url("img/menu2.png");
  width: 208px;
  height: 31px;
  text-align: center;
  list-style-type: none;
} …

试试这个: - 更新 - SOOORRY!

  <li><a href="index.php" class="first">Home</a></li>
<?php  
        if (the_title() == "language-translation") 
           print("<li><a href='become-a-volunteer'>Become a Volunteer</a></li>");
     ?>
    <li><a href="#"><?php the_title(); ?></a></li>

我得到的只是TEXT('成为一名志愿者')而不是LI项目......(或者那个问题的锚点)？ - 原谅我,但我粘贴了一个错误..这仍然不能在上面工作.

无论if是否为真,我都得到了TEXT,并且永远不会得到LI和A.

我在点击里面的链接时试图隐藏一个列表项

<ul>
<li id="list_1" class="list"><a href="http://">hide</a>
</li>

<li id="list_2" class="list"><a href="http://">hide</a></li>

<li id="list_3" class="list"><a href="http://">hide</a></li>

<li id="list_4" class="list"><a href="http://">hide</a></li>
</ul>

<span class="updateNumber">0</span>?

每次隐藏li项时,将updateNumber文本的数量增加1.谢谢

我认为这是一个非常简单的问题,但我似乎没有把它弄好.我想使用css设置列表样式,但我想要影响"顶级<li>元素.

现场看我的问题

HTML

<ul class="test">
<li>1</li>
<li>2
    <ul>
        <li>2.1 - should not be red</li>
        <li>2.2 - should not be red</li>
    </ul>
</li>
<li>3</li>

CSS

.test > li {
     color: #f00;
}

我究竟做错了什么？非常感谢!

如果我有一个无序列表:

<ul>
 <li data-sort-name="a">A</li>
 <li data-sort-name="d">D</li>
 <li data-sort-name="b">B</li>
 <li data-sort-name="c">C</li>
</ul>

和一个数组:

[a,b,c,d]

有没有办法按照与数组相同的顺序对上面的列表进行排序.(数组并不总是按时间顺序排列,仅用于解释目的).

谢谢.

我正在尝试更改整个文档中的列表项.我正在使用以下代码,但是我收到了一个错误.我究竟做错了什么？

function changeListItems() {
var listItem = document.getElementsByTagName("ul");
var docItem = listItem.getElementsByTagName("li");
docItem.setAttribute("class", "list-group-item");
};
changeListItems();

小提琴

数据

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30];

我想将这些数据拆分为3列,并希望如下所示:

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    ...
    <li>10</li>
</ul>
<ul>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    ...
    <li>20</li>
</ul>
<ul>
    <li>21</li>
    <li>22</li>
    <li>23</li>
    ...
    <li>30</li>
</ul>

使用ngfor时如何拆分数据？

<ul *ngFor="let item of arr">
    <li>{{item}}</li>
</ul>