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 の直接の子として持つことはできません。<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 > aa

于 2013-04-10T02:37:51.893 に答える