Question

我正在尝试使用将被拖动的行进行布局。

enter image description here

我可以很好地剥离桌子（右边的桌子带有绿色边框）但是当我添加锚标签以便这些变成大的可拖动单元格（它们将被拖动）时，条纹消失并且它们具有灰色背景（左边的表格带有黄色边框）。

HTML / CSS：

<html>
  <head>
  <style>
    #categorizer { padding: 20px; }
    #left  {
      color: green;
      background-color: yellow;
      display: inline;
      border: solid;
      border-color: pink, 10px
      padding: 20px;
      margin: 20px;
    }   
    #right {
      color: yellow;
      background-color: green;
      display: inline;
      border: solid;
      border-color: pink, 10px
      padding: 20px;
      margin: 20px;
    }   
    ul  
    {   
      padding: 30px;
      margin: 30px;
      float:left;
      list-style:none;
    }   
    li {
    padding: 20px;
    }   
    li:nth-child(even) { background-color: #000 }
    li:nth-child(odd) { background-color: #666 }
  </style>
  </head>
  <body>
    <div id="categorizer">
      <ul id="left">
        <a href="#"><li>1</li></a>
        <a href="#"><li>2</li></a>
        <a href="#"><li>3</li></a>
        <a href="#"><li>4</li></a>
      </ul>
      <ul id="right">
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
        <li>e</li>
      </ul>
    </div>
  </body>
</html>

我怎样才能拥有“显示手”的大型可拖动单元 - 不仅仅是字母，而是整个单元 - 这很重要 - 但仍然应用表格条纹（也可能是20多行，这是动态的）

Answer 1

<a>或<ul>只有<ol>只有<li>的直接子项才能生成#left - 只需为第一个列表切换订单（<a>）并将display: block;设置为<ul id="left"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> </ul>

{{1}}

Answer 2

移动<a>中的所有<li>代码并添加到您的css cursor:move至li，以便为每个li元素添加一只手。

jsLint Demo

HTML：

<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>

CSS：

li {
    cursor:move;
}

您可能希望将css中的li{更改为li, li > a，以使a标记不显示指针，除非您需要。

html - 如何对这些无序列表使用带有锚点的行条带化？

2 个答案: