边框底部全宽带衬垫

时间：2016-09-01 17:48:40

标签： html css css3 layout border

我正在尝试为每个列表项实现一致的边框，但就我有嵌套列表而言，我使用填充实现了嵌套。

我有以下结果，这是很正常的行为。

enter image description here

这是JSFiddle Example

CSS 

.accordion-menu {
  width: 100%;
  background: #52b3d9; }

.accordion-list {
  position: relative;
  display: none;
  width: 100%;
  /* Item submodule */
  /* Level modifiers */ }
  .accordion-list.is-root {
    display: block; }
  .accordion-list.is-opened {
    display: block; }
  .accordion-list-item {
    width: 100%;
    display: block;
    /* States */ }
    .accordion-list-item__icon {
      font-size: 1.125em;
      display: inline-block;
      vertical-align: middle; }
    .accordion-list-item__link {
      display: inline-block;
      white-space: initial;
      max-width: 70%;
      vertical-align: middle;
      color: #f7f7f7; }
      .accordion-list-item__link:visited, .accordion-list-item__link:link {
        color: #f7f7f7; }
    .accordion-list-item__post-count {
      font-size: 0.75em;
      position: absolute;
      display: inline-block;
      right: 0;
      color: #fdfdfd;
      padding: 0 0.83333em;
      margin-right: 0.83333em;
      background: #404247;
      border-radius: 10px; }
    .accordion-list-item__controls {
      padding: 0.625em 0.3125em;
      position: relative;
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      display: block;
      color: #f7f7f7; }
      .accordion-list-item__controls:hover {
        color: #FFC107; }
        .accordion-list-item__controls:hover .accordion-list-item__link {
          color: #FFC107; }
      .accordion-list-item__controls::before {
        display: inline-block;
        content: '\f10c';
        vertical-align: middle;
        font-family: "FontAwesome"; }
      .accordion-list-item__controls::after {
        content: '';
        display: block;
        position: absolute;
        border-bottom: 1px solid #c8c8c8;
        bottom: 0;
        width: 100%;
        left: 0; }
    .accordion-list-item.has-children > .accordion-list-item__controls::before {
      display: inline-block;
      content: '\f054';
      font-family: "FontAwesome";
      color: #f7f7f7; }
    .accordion-list-item.has-children > .accordion-list-item__controls.is-opened::before {
      content: '\f078';
      color: #f7f7f7; }
  .accordion-list--level-0 {
    padding-left: 0; }
  .accordion-list--level-1 {
    padding-left: 10px; }
  .accordion-list--level-2 {
    padding-left: 20px; }

HTML结构

   <div class="accordion-menu">
        <ul class="accordion-list cd-accordion-menu is-root accordion-list--level-0">
            <li class="accordion-list-item has-children">
                <div class="accordion-list-item__controls is-opened">
                    <span class="accordion-list-item__icon fa fa-cog"></span>
                    <a class="accordion-list-item__link" href="#0">
                        Sub Level 22
                    </a>
                    <div class="accordion-list-item__post-count">22</div>
                </div>
                <ul class="accordion-list is-opened accordion-list--level-1">
                    <li class="accordion-list-item has-children">
                        <div class="accordion-list-item__controls is-opened">
                            <span class="accordion-list-item__icon fa fa-cog"></span>
                            <a class="accordion-list-item__link" href="#0">
                                Sub Level 2
                            </a>
                            <div class="accordion-list-item__post-count">22</div>
                        </div>
                        <ul class="accordion-list is-opened accordion-list--level-2">
                            <li class="accordion-list-item">
                                <div class="accordion-list-item__controls">
                                    <span class="accordion-list-item__icon fa fa-cog"></span>
                                    <a class="accordion-list-item__link" href="#0">
                                        Sub Group 1
                                    </a>
                                    <div class="accordion-list-item__post-count">22</div>
                                </div>
                            </li>
                            <li class="accordion-list-item">
                                <div class="accordion-list-item__controls">
                                    <span class="accordion-list-item__icon fa fa-cog"></span>
                                    <a class="accordion-list-item__link" href="#0">
                                        Sub Group 1
                                    </a>
                                    <div class="accordion-list-item__post-count">22</div>
                                </div>
                            </li>
                            <li class="accordion-list-item">
                                <div class="accordion-list-item__controls">
                                    <span class="accordion-list-item__icon fa fa-cog"></span>
                                    <a class="accordion-list-item__link" href="#0">
                                        Sub Group 1
                                    </a>
                                    <div class="accordion-list-item__post-count">22</div>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <li class="accordion-list-item">
                        <div class="accordion-list-item__controls">
                            <span class="accordion-list-item__icon fa fa-cog"></span>
                            <a class="accordion-list-item__link" href="#0">
                                Sub Group 1
                            </a>
                            <div class="accordion-list-item__post-count">22</div>
                        </div>
                    </li>
                    <li class="accordion-list-item">
                        <div class="accordion-list-item__controls">
                            <span class="accordion-list-item__icon fa fa-cog"></span>
                            <a class="accordion-list-item__link" href="#0">
                                Sub Group 1
                            </a>
                            <div class="accordion-list-item__post-count">22</div>
                        </div>
                    </li>
                </ul>
            </li>
            <li class="accordion-list-item">
                <div class="accordion-list-item__controls">
                    <span class="accordion-list-item__icon fa fa-cog"></span>
                    <a class="accordion-list-item__link" href="#0">
                        Sub Group 1
                    </a>
                    <div class="accordion-list-item__post-count">22</div>
                </div>
            </li>
            <li class="accordion-list-item">
                <div class="accordion-list-item__controls">
                    <span class="accordion-list-item__icon fa fa-cog"></span>
                    <a class="accordion-list-item__link" href="#0">
                        Sub Group 1
                    </a>
                    <div class="accordion-list-item__post-count">22</div>
                </div>
            </li>
        </ul> <!-- cd-accordion-menu -->
    </div>

如何实现底部边框的全宽？

3 个答案:

答案 0 :(得分：3)

代替填充，您可以使用text-indent：

.accordion-menu {
  width: 100%;
  background: #52b3d9;
}

ul {
  padding: 0;/* reset */
}

.accordion-list {
  position: relative;
  display: none;
  width: 100%;
  /* Item submodule */
  /* Level modifiers */
}

.accordion-list.is-root {
  display: block;
}

.accordion-list.is-opened {
  display: block;
}

.accordion-list-item {
  width: 100%;
  display: block;
  /* States */
}

.accordion-list-item__icon {
  font-size: 1.125em;
  display: inline-block;
  vertical-align: middle;
}

.accordion-list-item__link {
  display: inline-block;
  white-space: initial;
  max-width: 70%;
  vertical-align: middle;
  color: #f7f7f7;
}

.accordion-list-item__link:visited,
.accordion-list-item__link:link {
  color: #f7f7f7;
}

.accordion-list-item__post-count {
  font-size: 0.75em;
  position: absolute;
  display: inline-block;
  right: 0;
  color: #fdfdfd;
  padding: 0 0.83333em;
  margin-right: 0.83333em;
  background: #404247;
  border-radius: 10px;
}

.accordion-list-item__controls {
  padding: 0.625em 0.3125em 0.625em 0em;
  text-indent: 0.3125em;
  position: relative;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  color: #f7f7f7;
}

.accordion-list-item__controls:hover {
  color: #FFC107;
}

.accordion-list-item__controls:hover .accordion-list-item__link {
  color: #FFC107;
}

.accordion-list-item__controls::before {
  display: inline-block;
  content: '\f10c';
  vertical-align: middle;
  font-family: "FontAwesome";
}

.accordion-list-item__controls::after {
  content: '';
  display: block;
  position: absolute;
  border-bottom: 1px solid #c8c8c8;
  bottom: 0;
  width: 100%;
  left: 0;
}

.accordion-list-item.has-children > .accordion-list-item__controls::before {
  display: inline-block;
  content: '\f054';
  font-family: "FontAwesome";
  color: #f7f7f7;
}

.accordion-list-item.has-children > .accordion-list-item__controls.is-opened::before {
  content: '\f078';
  color: #f7f7f7;
}

.accordion-list--level-0 {
}

.accordion-list--level-1 >li div {
  text-indent: 10px;  
}

.accordion-list--level-2 >li div {
  text-indent: 20px;
}
.accordion-menu ul li .accordion-list-item__post-count {
  text-indent:0;
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<div class="accordion-menu">
  <ul class="accordion-list cd-accordion-menu is-root accordion-list--level-0">
    <li class="accordion-list-item has-children">
      <div class="accordion-list-item__controls is-opened">
        <span class="accordion-list-item__icon fa fa-cog"></span>
        <a class="accordion-list-item__link" href="#0">
                        Sub Level 22
                    </a>
        <div class="accordion-list-item__post-count">22</div>
      </div>
      <ul class="accordion-list is-opened accordion-list--level-1">
        <li class="accordion-list-item has-children">
          <div class="accordion-list-item__controls is-opened">
            <span class="accordion-list-item__icon fa fa-cog"></span>
            <a class="accordion-list-item__link" href="#0">
                                Sub Level 2
                            </a>
            <div class="accordion-list-item__post-count">22</div>
          </div>
          <ul class="accordion-list is-opened accordion-list--level-2">
            <li class="accordion-list-item">
              <div class="accordion-list-item__controls">
                <span class="accordion-list-item__icon fa fa-cog"></span>
                <a class="accordion-list-item__link" href="#0">
                                        Sub Group 1
                                    </a>
                <div class="accordion-list-item__post-count">22</div>
              </div>
            </li>
            <li class="accordion-list-item">
              <div class="accordion-list-item__controls">
                <span class="accordion-list-item__icon fa fa-cog"></span>
                <a class="accordion-list-item__link" href="#0">
                                        Sub Group 1
                                    </a>
                <div class="accordion-list-item__post-count">22</div>
              </div>
            </li>
            <li class="accordion-list-item">
              <div class="accordion-list-item__controls">
                <span class="accordion-list-item__icon fa fa-cog"></span>
                <a class="accordion-list-item__link" href="#0">
                                        Sub Group 1
                                    </a>
                <div class="accordion-list-item__post-count">22</div>
              </div>
            </li>
          </ul>
        </li>
        <li class="accordion-list-item">
          <div class="accordion-list-item__controls">
            <span class="accordion-list-item__icon fa fa-cog"></span>
            <a class="accordion-list-item__link" href="#0">
                                Sub Group 1
                            </a>
            <div class="accordion-list-item__post-count">22</div>
          </div>
        </li>
        <li class="accordion-list-item">
          <div class="accordion-list-item__controls">
            <span class="accordion-list-item__icon fa fa-cog"></span>
            <a class="accordion-list-item__link" href="#0">
                                Sub Group 1
                            </a>
            <div class="accordion-list-item__post-count">22</div>
          </div>
        </li>
      </ul>
    </li>
    <li class="accordion-list-item">
      <div class="accordion-list-item__controls">
        <span class="accordion-list-item__icon fa fa-cog"></span>
        <a class="accordion-list-item__link" href="#0">
                        Sub Group 1
                    </a>
        <div class="accordion-list-item__post-count">22</div>
      </div>
    </li>
    <li class="accordion-list-item">
      <div class="accordion-list-item__controls">
        <span class="accordion-list-item__icon fa fa-cog"></span>
        <a class="accordion-list-item__link" href="#0">
                        Sub Group 1
                    </a>
        <div class="accordion-list-item__post-count">22</div>
      </div>
    </li>
  </ul>
  <!-- cd-accordion-menu -->
</div>

https://jsfiddle.net/1to3cLfr/4/

答案 1 :(得分：0)

 <li class="accordion-list-item">

尝试将border-bottom属性归因于上面的类。

答案 2 :(得分：0)

如果从.accordion-list-level-2 {}中删除20px的左边距，而是将其添加到.accordion-list-level-2 li div {}，这将使边框全部移除穿过。 ul上的填充阻止了div扩展100％的宽度

相关问题
最新问题