Question

我正在尝试创建一个我创建的OrgChart的移动版本;但是，我在尝试以我想要的方式堆叠ul和li元素时遇到问题。从本质上讲，我需要将元素叠加在一起，就像我粗略绘制的ms画在这里：

我现在拥有的是嵌套在ul个元素中的一系列li个元素。嵌套在ul元素中的每个li元素表明所述元素是一个或多个li元素的父元素。请参阅CodePen：http://codepen.io/jacob_johnson/pen/xwLmWo

我现在不太关心连接器，但我很难理解我是如何堆叠这些元素的。在HTML / CSS方面我是比较新的...好吧，如果用一些JavaScript可以实现这一点，我也会听到它的全部内容;然而，这将是移动的（即当屏幕宽度非常小时）。

以下是我的HTML设置示例：

<div class="tree">
  <ul>
    <li>
      <div id="ss_menu">
        <a class="ss_button"><span>Director </span></a>
        <div class="ss_content">
          <img src="http://img3.wikia.nocookie.net/__cb20121227201208/jamesbond/images/6/61/Generic_Placeholder_-_Profile.jpg" width="70px" style="border: 1px solid #000;"/><br/>
        </div>
      </div>
    <ul>
      <li>
        <div id="ss_menu">
          <a class="ss_button"><span>Assistant to the Director </span></a>
          <div class="ss_content">
            <img src="http://img3.wikia.nocookie.net/__cb20121227201208/jamesbond/images/6/61/Generic_Placeholder_-_Profile.jpg" width="70px" style="border: 1px solid #000;"/><br/>
          </div>
        </div>
        <ul>
          <li>
            <div id="ss_menu">
              <a class="ss_button"><span>Deputy Director </span></a>
              <div class="ss_content">
                <img src="http://img3.wikia.nocookie.net/__cb20121227201208/jamesbond/images/6/61/Generic_Placeholder_-_Profile.jpg" width="70px" style="border: 1px solid #000;"/><br/>
              </div>
            </div>
          <ul>
            <li>
              <a href="#" class="just-line"><br/><br/><br/></a>
              <ul>
                <li>
                  <div id="ss_menu">
                    <a class="ss_button"><span>Associate Director </span></a>
                    <div class="ss_content">
                      <img src="http://img3.wikia.nocookie.net/__cb20121227201208/jamesbond/images/6/61/Generic_Placeholder_-_Profile.jpg" width="70px" style="border: 1px solid #000;"/><br/>
                    </div>
                  </div>
                  <ul>
                    <li>
                      <a href="#" class="just-line"><br/><br/><br/></a>
                      <ul>
                        <li>
                          <a href="#" class="just-line"><br/><br/><br/></a>
                          <ul>
                            <li>
                              <a href="#"><span>Consumer Laws &amp; Regulations</span></a>
                            </li>
                          </ul>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li>
              <div id="ss_menu">
                <a class="ss_button"><span>Senior Associate Director </span></a>
                <div class="ss_content">
                  <img src="http://img3.wikia.nocookie.net/__cb20121227201208/jamesbond/images/6/61/Generic_Placeholder_-_Profile.jpg" width="70px" style="border: 1px solid #000;"/><br/>
                </div>
              </div>
              <ul>
                <li>
                  <a href="#" class="just-line"><br/><br/><br/></a>
                  <ul>
                    <li>
                      <a href="#" class="just-line"><br/><br/><br/></a>
                      <ul>
                        <li>
                          <div id="ss_menu">
                            <a class="ss_button"><span>Assistant Director </span></a>
                            <div class="ss_content">
                              <img src="http://img3.wikia.nocookie.net/__cb20121227201208/jamesbond/images/6/61/Generic_Placeholder_-_Profile.jpg" width="70px" style="border: 1px solid #000;"/><br/>
                            </div>
                          </div>
                          <ul>
                            <li>
                              <a href="#"><span>Examiner Training </span></a>
                            </li>
                            <li>
                              <a href="#"><span>Supervision Administration </span></a>
                            </li>
                            <li>
                              <a href="#"><span>Reserve Bank Oversight</span></a>
                            </li>
                          </ul>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
                <li>

Answer 1

您不应该为多个对象使用ID，通常的做法是使用它们一次并使用jQuery / Javascript功能。我将ss_menu更改为一个类。至于移动设备上的风格，我会使用媒体查询，并从此开始：

@media (max-width: 600px) {
  .tree li a, li{
    display:block;
    width:100%;
    box-sizing:border-box;    
  }
}

堆叠<ul>元素和其中的<li> - 移动设计

1 个答案: