Question

这可能看起来像一个重复的问题，但我找不到任何满意的答案。我想创建一个导航栏。我刚刚创建了一些内联div，但它在两者之间产生了一些空间。所以，我把它们放在容器div中并给它相同的背景颜色。它工作正常，直到浏览器是全屏大小。如果我缩小浏览器的大小，使水平滚动条出现，那么，在滚动区域，它仍然显示div之间的差距（见图）。原因是，底层容器没有扩展到全宽（它只考虑浏览器的宽度而不考虑滚动）。我使用span或使用无序列表（ul，li）尝试了同样的事情，但它给出了相同的结果。

代码 -

＆＃13;

   .navbtn {
        white-space:nowrap;
        background: #333;
    }
   .dark-btn-div {
    display:inline-block;
    vertical-align:middle;
    line-height:2em;
    margin: 0;
    padding: 0;
    background:#333;
    color:#fff;
    cursor:pointer;
    font-size:1em;
}

＆＃13;

 <div class=" navbtn">
    <div class="dark-btn-div">Test1111</div>
    <div class="dark-btn-div">Test2222</div>
    <div class="dark-btn-div">Test3333</div>
    <div class="dark-btn-div">Test4444</div>
    <div class="dark-btn-div">Test5555</div>
    <div class="dark-btn-div">Test6666</div>
    <div class="dark-btn-div">Test7777</div>
    <div class="dark-btn-div">Test8888</div>
    <div class="dark-btn-div">Test9999</div>

</div>


<ul class=" navbtn">
    <li class="dark-btn-div">Test1111</li>
    <li class="dark-btn-div">Test2222</li>
    <li class="dark-btn-div">Test3333</li>
    <li class="dark-btn-div">Test4444</li>
    <li class="dark-btn-div">Test5555</li>
    <li class="dark-btn-div">Test6666</li>
    <li class="dark-btn-div">Test7777</li>
    <li class="dark-btn-div">Test8888</li>
    <li class="dark-btn-div">Test9999</li>

</ul>

＆＃13;

请帮助..

Answer 1

   .navbtn {
        white-space:nowrap;
        background: #333;
    }
   .dark-btn-div {
    display:inline-block;
    vertical-align:middle;
    line-height:2em;
    margin: 0;
    padding: 0;
    background:#333;
    color:#fff;
    cursor:pointer;
    font-size:1em;
}

<div class=" navbtn">
    <div class="dark-btn-div">Test1111</div>
    <div class="dark-btn-div">Test2222</div>
    <div class="dark-btn-div">Test3333</div>
    <div class="dark-btn-div">Test4444</div>
    <div class="dark-btn-div">Test5555</div>
    <div class="dark-btn-div">Test6666</div>
    <div class="dark-btn-div">Test7777</div>
    <div class="dark-btn-div">Test8888</div>
    <div class="dark-btn-div">Test9999</div>

</div>


<ul class=" navbtn">
    <li class="dark-btn-div">Test1111</li>
    <li class="dark-btn-div">Test2222</li>
    <li class="dark-btn-div">Test3333</li>
    <li class="dark-btn-div">Test4444</li>
    <li class="dark-btn-div">Test5555</li>
    <li class="dark-btn-div">Test6666</li>
    <li class="dark-btn-div">Test7777</li>
    <li class="dark-btn-div">Test8888</li>
    <li class="dark-btn-div">Test9999</li>

</ul>

Answer 2

还有一种很好的CSS方法可以解决这个问题，因为有时很难删除HTML标记中的空格。

默认情况下，inline-block元素之间存在间距。我有以下spaceless修复程序，您可以使用：

<强> SCSS

@mixin spaceless-reset() {

  font-family: <your-initial-font>; // reset font settings
  letter-spacing: normal;

}


@mixin spaceless() {

  font-family: monospace; // kill all whitespace
  letter-spacing: -.64em;

  > * {

    @include spaceless-reset();
    display:inline-block;
    vertical-align: middle;

  }

}


%spaceless {

  @include spaceless();

}


%spaceless-reset {

  @include spaceless-reset();

}

// Usage
.navbtn {
    @extend %spaceless;
}

<强> CSS

SCSS示例输出为：

.navbtn {
  font-family: monospace;
  letter-spacing: -.64em; }
  .navbtn > * {
    font-family: <your-initial-font>;
    letter-spacing: normal;
    display: inline-block;
    vertical-align: middle; }

另见有关此主题的其他文章：

Answer 3

<style>

   .navbtn {
     white-space:nowrap;
     background: #333;
   }
   .dark-btn-div {
   display:inline-block;
   vertical-align:middle;
   line-height:2em;
   margin: 0px; // change
   padding: 0px; // change
   background:#333;
   color:#fff;
   cursor:pointer;
   font-size:1em;
   }
</style>

在scolling时处理div之间的空间

3 个答案: