1

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

在此处输入图像描述

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

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+ 行，这是动态的）。

4

2 回答 2

3

您不能将 a<a>作为 a 的直接子级<ul>或<ol>只有 a<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>
于 2013-04-10T02:32:36.253 回答
3

移动您的所有<a>标签<li> 并添加到您的 csscursor:move中，以便为每个元素li添加一只手。li

jsLint 演示

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标签不显示指针，除非你想要那样。

于 2013-04-10T02:37:51.893 回答