如何将CSS类设置为数据列表？

Question

一切工作正常，但我对项目的样式没有任何控制权。 我的意思是我在外部具有数据列表上的样式，但我想在每个项目之间（垂直）添加一些间距。 我怎么做？

<div id="cssmenu">
  <ul>
    <li><a href='SurveyorHome.aspx'><span>Home</span></a>
    </li>
    <li><a href='GENERATE_CLAIM.aspx'><span>Generate New Claim</span></a>
    </li>
    <li><a href='Add_Trainee.aspx'><span>Add Trainee</span></a>
    </li>
    <li><a href='AssignTrainee.aspx'><span>Assign Task </span></a>
    </li>
    <li><a href='AssignTask.aspx'><span>Assigned Tasks</span></a>
    </li>
    <li><a href='ShowTraineeReport.aspx'><span>Connectivity Report</span></a>
    </li>
    <li>
      <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/SurvayorDocument.aspx">
        <asp:Label ID="Label2" runat="server" Font-Bold="True" Text="My Documents" Font-Names="Arial" Font-Size="10pt" ForeColor="White" Style="text-decoration: none;"></asp:Label>
      </asp:HyperLink>
    </li>

    <li><a href='SurveyorAllClaims.aspx'><span>All Claims Status</span></a>
    </li>
    <li><a href='SurveyVisits.aspx'><span>Add Survey Visits</span></a>
    </li>




    <li class="active has-sub"><a href='Surveyor-Dashboard.aspx?Type=Motor'><span>Motor</span></a>
      <ul>
        <li class="last"><a href='JIR-rpt.aspx?Type=Motor'><span>JIR</span></a>
        </li>
        <li class="last"><a href='ILA-Report.aspx?Type=Motor'><span>ILA</span></a>
        </li>
        <li class="last"><a href='LOR-report.aspx?Type=Motor'><span>LOR</span></a>
        </li>
        <li class="last"><a href='View-my-claims.aspx?Type=Motor'><span>View My Claims</span></a>
        </li>
        <li class="l ast"><a href='FSR-rpt.aspx?Type=Motor'><span>FSR</span></a>
        </li>
        <li class="last"><a href='SurveyorClaimBills.aspx?Type=Motor'><span>Motor Survey Bill</span></a>
        </li>

      </ul>
    </li>
    <li class="active has-sub"><a href='#'><span>Marine</span></a>
      <ul>
        <li class="last"><a href='JIR-rpt.aspx?Type=Marine'><span>JIR</span></a>
        </li>
        <li class="last"><a href='ILA-Report.aspx?Type=Marine'><span>ILA</span></a>
        </li>
        <li class="last"><a href='LOR-report.aspx?Type=Marine'><span>LOR</span></a>
        </li>
        <li class="last"><a href='SurveyorMarineClaims.aspx'><span>View My Claims / FSR</span></a>
        </li>
        <li class="l ast"><a href='SurveyorClaimBills.aspx?Type=Marine'><span>Survey Bill</span></a>
        </li>


      </ul>
    </li>
    <li class="active has-sub"><a href='#'><span>Non-Marine</span></a>
      <ul>
        <li class="last"><a href='NonMarineJIRList.aspx'><span>JIR</span></a>
        </li>
        <li class="last"><a href='ILA-Report.aspx?Type=Non-Marine'><span>ILA</span></a>
        </li>
        <li class="last"><a href='LOR-report.aspx?Type=Non-Marine'><span>LOR</span></a>
        </li>
        <li class="last"><a href='FSR-rpt.aspx?Type=Non-Marine'><span>FSR</span></a>
        </li>
        <li class="last"><a href='SurveyorClaimBills.aspx?Type=NonMarine'><span>Non Marine Survey Bill</span></a>
        </li>


      </ul>
    </li>

  </ul>

  <ul>
    <asp:DataList ID="dlMenu" CssClass="active has-sub" runat="server" OnItemDataBound="dlMenu_ItemDataBound" RepeatColumns="1" RepeatDirection="Vertical" OnItemCommand="dlMenu_ItemCommand" Height="16px">
      <ItemTemplate>

        <li class="active has-sub">

          <asp:LinkButton ID="lnk_menu" class="active has-sub" runat="server" Text='<%# Eval("MenuName") %>' CommandName="Click" Style="text-decoration: none;" Font-Bold="True" Font-Names="Arial" ForeColor="Black" CssClass="linkbtn"></asp:LinkButton>

          <li class="active has-sub">
            <a href="<%# Eval(" MenuName ") %>"></a>
          </li>
        </li>
  </ul>

  <asp:HiddenField ID="hfId" runat="server" Value='<%#Eval("ID")%>' />

  <asp:Repeater ID="rptGadget" runat="server">
    <ItemTemplate>
      <li class="active has-sub">
        <ul>
          <li class="last">

            <a href='<%#Eval("SubmenuURL")%>'>
              <%#Eval( "SubmenuName")%>
            </a>
            <br />
          </li>
        </ul>
      </li>
    </ItemTemplate>
  </asp:Repeater>
  </ItemTemplate>
  </asp:DataList>
  </ul>

</div>

Answer 1

#cssmenu > ul > li {
    padding: 10px 0;
}

Answer 2

在菜单*项目之间（ li ）：

li{
   margin:50px 0;
}

菜单之间*（ ul ）：

ul{
   margin:50px 0;
}

要将其仅应用于#cssmenu孩子，请在#cssmenu #cssmenu添加规则

如果您无法在外部文件中更改CSS，则内联将添加style="margin:50px 0;" 适当的元素。

^{*菜单=无序列表，50px用于示例}