Question

我已经尝试了几种解决方案，但到目前为止我没有任何工作。我只是希望链接处于相同级别的缩进和块级方式。我试图在不使用绝对定位的情况下完成此任务，否则会破坏其余的代码。任何帮助将不胜感激。

body {
  margin-left: 40px; }

.bookmarks {
  border: 1px solid gray;
  width: 200px; }
  .bookmarks ul {
    list-style-type: none; }

.link4 {
  box-sizing: border-box;
  display: inline-block;
  background-color: pink; }
  .link4 .left-side {
    height: 100%;
    width: 80%;
    color: white;
    background-color: blue;
    float: left; }
  .link4 .right-side {
    height: 100%;
    width: 20%;
    background-color: yellow;
    float: right; }

.second-menu li {
  background-color: lightgreen; }

.last-menu li {
  background-color: lightgray; }

/*# sourceMappingURL=test2.css.map */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<div class="col-md-6">
      <div class="bookmarks"> 
        <ul class="nav top-menu" id="affix-ul">
          <li class="link1">
              <a href="#">
              Some Text on link 1
            </a>
          </li>
          <li class="link2">
            <a href="#">
              Some Text on link 2
            </a>
          </li>
          <li class="link 3">
            <a href="#">
              Some Text on link 3
            </a>
          </li>
          <li class="link4 active">
            <div class="left-side">
              <a href="#">
                <span>Some Text on link 4</span>
              </a>  
            </div>
            <div class="right-side">
              <a href="#" class="arrow-up" aria-hidden="true" data-toggle="collapse" data-target="#hiddenMenuOne">
                <i class="fa fa-chevron-down"> ^
                </i>
              </a> 
            </div>
            <ul id="hiddenMenuOne" class="collapse second-menu">
              <li>
                <a href="#">Sublink1</a>
              </li>
              <li>
                <a href="#">Sublink2</a>
              </li>
              <li>
                <a href="#">This is a sublink3 with a bit more text</a>
              </li>
              <li>
                <a href="#">sublink4</a>
              </li>
              <li>
                <a href="#">sublink5</a>
              </li>
              <li>
                <a href="#">sublink6</a>
              </li>
              <li class="second-level-menu wrapper">
                <div class="left-side">
                  <a href="#" class="">
                  Last sublink on submenu
                  </a>
                </div>             
                <div class="right-side">
                  <a href="#" class="second-dropdown" aria-hidden="true" data-toggle="collapse" data-target="#hiddenMenuTwo">
                    <i class="fa fa-chevron-down">^
                    </i>
                  </a>
                </div>
                <ul id="hiddenMenuTwo" class="collapse last-menu">
                  <li>
                    <a href="#">Tertiary 1</a>
                  </li>
                  <li>
                    <a href="#">Tertiary 2</a>
                    </li>
                  <li>
                    <a href="#">Tertiary 3 with a second line</a>
                  </li>
                </ul>
              </li>
            </ul>
          </li>   
        </ul>
      </div>         
    </div>

Answer 1

以防万一有人想知道答案。我刚删除了li的左侧填充，并为uls添加了一个height属性

以块级方式定位子菜单链接

1 个答案: