使用 div 创建 CSS 树答案

【问题标题】：Creating a CSS tree with divs使用 div 创建 CSS 树
【发布时间】：2012-03-28 00:26:47
【问题描述】：

我正在尝试创建这种效果：http://www.thecssninja.com/demo/css_tree/ 我遇到的问题是我正在使用的代码仅输出 div。所以没有ol/ul。我不确定如何做到这一点。这是我正在使用的代码的 sn-p：

<div class="jr_fieldDiv jr_exteriortype" style="">
    <label class="jrLabel">Exterior type</label>
    <div class="jr_fieldOption">
        <input type="checkbox" name="data[Field][Listing][jr_exteriortype][]"
        id="jr_exteriortype_brick" data-click2add="0" value="brick">&nbsp;Brick</div>
    <div class="jr_fieldOption">
        <input type="checkbox" name="data[Field][Listing][jr_exteriortype][]"
        id="jr_exteriortype_cement-concrete" data-click2add="0" value="cement-concrete">&nbsp;Cement/Concrete</div>
    <div class="jr_fieldOption">
        <input type="checkbox" name="data[Field][Listing][jr_exteriortype][]"
        id="jr_exteriortype_composition" data-click2add="0" value="composition">&nbsp;Composition</div>
    <div class="jr_fieldOption">
        <input type="checkbox" name="data[Field][Listing][jr_exteriortype][]"
        id="jr_exteriortype_metal" data-click2add="0" value="metal">&nbsp;Metal</div>
    <div class="jr_fieldOption">
        <input type="checkbox" name="data[Field][Listing][jr_exteriortype][]"
        id="jr_exteriortype_shingle" data-click2add="0" value="shingle">&nbsp;Shingle</div>
    <div class="jr_fieldOption">
        <input type="checkbox" name="data[Field][Listing][jr_exteriortype][]"
        id="jr_exteriortype_stone" data-click2add="0" value="stone">&nbsp;Stone</div>
    <div class="jr_fieldOption">
        <input type="checkbox" name="data[Field][Listing][jr_exteriortype][]"
        id="jr_exteriortype_stucco" data-click2add="0" value="stucco">&nbsp;Stucco</div>
    <div class="jr_fieldOption">
        <input type="checkbox" name="data[Field][Listing][jr_exteriortype][]"
        id="jr_exteriortype_vinyl" data-click2add="0" value="vinyl">&nbsp;Vinyl</div>
    <div class="jr_fieldOption">
        <input type="checkbox" name="data[Field][Listing][jr_exteriortype][]"
        id="jr_exteriortype_wood" data-click2add="0" value="wood">&nbsp;Wood</div>
    <div class="jr_fieldOption">
        <input type="checkbox" name="data[Field][Listing][jr_exteriortype][]"
        id="jr_exteriortype_wood-products" data-click2add="0" value="wood-products">&nbsp;Wood Products</div>
    <div class="jr_fieldOption">
        <input type="checkbox" name="data[Field][Listing][jr_exteriortype][]"
        id="jr_exteriortype_other" data-click2add="0" value="other">&nbsp;Other</div>
    <div class="clr"></div>
</div>

【问题讨论】：

我很困惑你的代码只允许 div 吗？您是否通过 ajax 将内容加载到具有特定名称的 div 中？如果是，则通过 ajax 加载 ol/ul 内容。
它是 Joomla 的一个组件，所以我确信可以加载 ol/ul，只是不完全确定在哪里进行编辑以使其成为可能。我想我会搜索代码。

标签： html css joomla tree

【解决方案1】：

虽然列表会更好，但使用 div 也可以毫无问题地做到这一点。结构无所谓

<ul>
   <li></li>
   <li>
      <ul>
         <li></li>
      </ul>
   </li>
</ul>

或

<div class="parent">
   <div class="child"></div>
   <div class="child parent">
       <div class="child"></div>
   </div>
</div>

借助类的一些帮助，您可以轻松地设置样式，就好像您有一个 ol/ul 列表结构一样。

【讨论】：

谢谢克里斯托夫！非常感谢您的帮助。
@CarlV 不客气。如果它确实帮助您解决了问题，您可以通过单击左侧的绿色箭头来接受答案。这标志着其他用户的问题已解决。
我讨厌成为一个 neusense 我试图弄清楚如何 CSS 这段代码。我查看了许多网站，但没有运气。我只需要一个父组和一个子组
嗯，如果我能找到它，那么尽可能。如果我不能，那根本就没有。

【解决方案2】：

你应该override the template该组件正在使用。

【讨论】：