グループを構成する2つのli要素を理解するために垂直線を打つ

Question

いくつかのLI要素を含むHTMLページがあり、LI要素にグループ化機能を追加したいとします。 'automobile'私はグループ化を適用したいと思います。私はそれらに同じgroupidを適用し、それらを区別するためにマージンを適用しました。しかし、私は垂直線を適用して、ユーザーがこれら2つのLI要素がグループ化されていることを正しく理解できるようにしたいと考えています。あなたがここにスタイルシートで作業しているので、あなたは、クラス属性のそのid属性を変更する必要がありますとIDが一意である、それをあなたのような複数回使用することはできません

<div> 
 
    <ul> 
 
    <li title="Insurance"> 
 
     <div> 
 
     <input type="checkbox" /> 
 
     <span>Malpractice</span> 
 
     </div> 
 
    </li> 
 
    <li title="Construction"> 
 
     <div> 
 
     <input type="checkbox" /> 
 
     <span>Carpentry</span> 
 
     </div> 
 
    </li> 
 

 
    <li title="Education" id="grp1" style="margin-left:20px;"> 
 
     <div> 
 
     <input type="checkbox" /> 
 
     <span>College</span> 
 
     </div> 
 
    </li> 
 
    <li title="Insurance" id="grp1" style="margin-left:20px;"> 
 
     <div> 
 
     <input type="checkbox" /> 
 
     <span>Automobile</span> 
 
     </div> 
 
    </li> 
 

 
    <li title="Education"> 
 
     <div> 
 
     <input type="checkbox" /> 
 
     <span>Iron Worker</span> 
 
     </div> 
 
    </li> 
 
    <li title="Insurance"> 
 
     <div> 
 
     <input type="checkbox" /> 
 
     <span>High School</span> 
 
     </div> 
 
    </li> 
 

 
    </ul> 
 
</div>

Answer 1

使っている。

<div> 
    <ul> 
     <li title="Insurance"> 
      <div> 
       <input type="checkbox" > 
       <span>Malpractice</span> 
      </div> 
     </li> 
     <li title="Construction"> 
      <div> 
       <input type="checkbox" > 
       <span>Carpentry</span> 
      </div> 
     </li> 

     <li title="Education" class="grp1" style="margin-left:20px;"> 
      <div> 
       <input type="checkbox" > 
       <span>College</span> 
      </div> 
     </li> 
     <li title="Insurance" class="grp1" style="margin-left:20px;"> 
      <div> 
       <input type="checkbox" > 
       <span>Automobile</span> 
      </div> 
     </li> 

     <li title="Education"> 
      <div> 
       <input type="checkbox" > 
       <span>Iron Worker</span> 
      </div> 
     </li> 
     <li title="Insurance"> 
      <div> 
       <input type="checkbox" > 
       <span>High School</span> 
      </div> 
     </li> 

    </ul> 
</div> 

その後、次の

li.grp1 { 
    border-left: 3px solid blue; 
} 

PSを行うことができます。入力タグを閉じないように覚えています。入力はコンテナではなく要素になるように設計されているため、ここには開かれたタグと閉じタグはありません。

Answer 2

これはあなたの探しているものですか？

$(document).on("click", "ul", function() { 
 
    alert("Clicked!"); 
 
})

.grouped { 
 
    border-left: solid 15px pink; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.grouped:before { 
 
    font-family: fontAwesome; 
 
    content: "\f03a"; 
 
    font-size: 10px; 
 
    position: absolute; 
 
    left: 10px; 
 
    top: 10px; 
 
    cursor: pointer; 
 
    pointer-events: all; 
 
} 
 

 
.grouped li { 
 
    list-style: none; 
 
} 
 

 
.grouped li span { 
 
    padding-left: 1em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<ul class="grouped"> 
 
    <li><input type="text"><span>College</span></li> 
 
    <li><input type="text"><span>Automobile</span></li> 
 
</ul>