Question

如何将黑色.divider拉伸到此容器的整个宽度？

设置宽度为100％当然不起作用内部容器相应地设置了边距。如何将宽度设置为外部容器边距，使其看起来像是在导航容器上100％伸展？

enter image description here

      <div class="well sidebar-nav left">
        <ul class="nav nav-list">
         <li class="divider"></li>  // <-- How to stretch 100% to outer container margins
            <li class="nav-header">Sidebar</li>
          <li class="active"><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
      </div><!--/.well -->         
    </div><!--/span-->
  </div><!--/row-->

body {
padding-top: 60px;
padding-bottom: 40px;
}
.sidebar-nav {
    padding: 9px 0;
}
.row-fluid > .sidebar-nav {
    width: 220px;
}
.left {
    float:left;
}
.divider {
  border-top: 1px solid #000 !important;
  border-bottom: 1px solid #000 !important;     
}

Answer 1

填充来自ul列表，因此您可以尝试在列表前使用div。这将延伸100％。

<强> HTML

<div class="well sidebar-nav left">
    <div class="divider"></div>
    <ul class="nav nav-list">
        <li class="nav-header">Sidebar</li>
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </ul>
</div>

<强> CSS

.divider {
    border-top: 1px solid #000 !important;
    border-bottom: 1px solid #000 !important;
    height: 1px;
}

<强> Example fiddle

<强>更新

我认为我找到了一个更好的解决方案，不需要对标记进行任何更改，现在您可以在列表中的任何位置添加li,divider。将其添加到您的CSS：

.nav-list {
    padding: 0;
}
.nav-list > li > a, .nav-list .nav-header {
    margin: 0;
}

<强> New fiddle

Answer 2

我根据您的要求修改了代码。

    <div class="container" style="width: 1300px">
  <div class="row-fluid">

      <div class="well sidebar-nav left">
        <ul class="nav nav-list" style="width:100%; padding-left:0px;">
            <li class="divider"></li></ul>
          <ul class="nav nav-list">
            <li class="nav-header">Sidebar</li>
          <li class="active"><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
      </div><!--/.well -->



    </div><!--/span-->
  </div><!--/row-->

检查fiddele http://jsfiddle.net/W3Dh3/10/

Answer 3

它没有显示高达100％因为刚刚上面隐藏了CSS属性溢出，也有一些填充左边，看到更新的小提琴看到删除后的更改

    <div class="container" style="width: 1300px">
  <div class="row-fluid">

      <div class="well sidebar-nav left">
        <ul class="nav nav-list"style="width:100%; padding-left:0px;">
         <li class="divider"></li>
            <li class="nav-header">Sidebar</li>
          <li class="active"><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
      </div><!--/.well -->



    </div><!--/span-->
  </div><!--/row-->

http://jsfiddle.net/W3Dh3/8/

Answer 4

我可以看到两种方法来解决这个问题：

<强> 1。只需编辑CSS即可使用负边距（不是非常动态，但又快速而简单）。

我添加了这个以获得正确的效果：

.nav-list .divider {
    margin-left: -12px;
    margin-right: -12px;
}

这样做的缺点在于它取决于您不改变任何尺寸或缩放。

<强> 2。使用一些javascript / jQuery。

或者，您可以使用一些jQuery（假设您已经在使用该菜单），因此打开页面的大小并不重要。我用了这个小片段：

var resizeDivider = function() {
    var navWidth = $('.sidebar-nav').width();
    var navIndent = $('.nav-header').css('margin-left');
    var divider = $('.divider');
    divider.width(navWidth);
    divider.css('margin-left', navIndent);
}
$(function () {
    resizeDivider();
});

但是，根据您的使用情况，这可能有点笨拙。不过，其中一种解决方案应该适合你！

如何将.divider（导航）拉伸100％到容器的宽度？

4 个答案: