CSS：如何设置宽度到孩子的宽度？

Question

我想制作一个水平部分，例如Quora.com

这是我想出来的

<div class="out-wrapper">
  <div class="inner-wrapper">
    <% 6.times do %>
      <a class="nav-link pull-left" href="#">Nav 1</a>
    <% end  %>
  </div>
</div>

.out-wrapper{
  overflow-x: scroll;
  .inner-wrapper{
    /* width: 600px; */
    .nav-link{
      padding: 10px;
    }
  }
}

演示：http://codepen.io/anon/pen/XJZyog

如果我将horizontal scroll设置为固定值，我只能创建width。

如果不指定固定值，我该怎么做？像width: overall-width-of-children一样 因此宽度将自动为其所有元素的总宽度

Answer 1

如果元素超出右边缘，浏览器会将元素换行到新行，因此父元素的宽度将为100％（最大值）。为避免这种情况，您有两种解决方案：

Use display: inline-block and white-space: nowrap

.out-wrapper {
  overflow-x: scroll;
}
.out-wrapper .inner-wrapper {
  white-space: nowrap;
}
.out-wrapper .inner-wrapper .nav-link {
  display: inline-block;
  padding: 10px;
  letter-spacing: 2em; /* for demonstration */
}

<div class="out-wrapper">
  <div class="inner-wrapper">
    <a class="nav-link" href="#">Nav 1</a>
    <a class="nav-link" href="#">Nav 1</a>
    <a class="nav-link" href="#">Nav 1</a>
    <a class="nav-link" href="#">Nav 1</a>
    <a class="nav-link" href="#">Nav 1</a>
  </div>
</div>

Use display: table and display: table-cell

.out-wrapper {
  overflow-x: scroll;
}
.out-wrapper .inner-wrapper {
  display: table;
}
.out-wrapper .inner-wrapper .nav-link {
  display: table-cell;
  white-space: nowrap;
  padding: 10px;
  letter-spacing: 2em; /* for demonstration */
}

<div class="out-wrapper">
  <div class="inner-wrapper">
    <a class="nav-link" href="#">Nav 1</a>
    <a class="nav-link" href="#">Nav 1</a>
    <a class="nav-link" href="#">Nav 1</a>
    <a class="nav-link" href="#">Nav 1</a>
    <a class="nav-link" href="#">Nav 1</a>
  </div>
</div>

Answer 2

要成功完成所需，您必须在代码中添加jQuery以总结所有子元素的宽度。我在这里有demo你想要成功的东西。

HTML

<div class="out-wrapper">
   <div class="inner-wrapper">
     <% 6.times do %>
        <a class="nav-link pull-left" href="#">Nav 1</a>
     <% end  %>
  </div>
</div>

CSS

.out-wrapper{
  overflow-x: scroll;
  overflow-y:hidden;

}
.inner-wrapper{

}
.nav-link{
    padding: 10px;
}

的jQuery

$(document).ready(function() {
    var container_width = 0;
    $('.inner-wrapper a').each(function() {
        container_width += $(this).outerWidth( true );
    });

    $(".inner-wrapper").css("width", container_width + 250);
)}

参考文献：

Make content horizontally scroll inside a div

Calculate total width of Children with jQuery