Quiero hacer una sección horizontal, como Quora.com

enter image description here

Esto es lo que se me ocurrió

<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;
    }
  }
}

Demostración: http://codepen.io/anon/pen/XJZyog

Solo puedo crear un horizontal scroll si configuro el width en un valor fijo.

¿Cómo puedo hacer esto sin especificar un valor fijo? Me gusta width: overall-width-of-children Entonces el ancho sería automáticamente el ancho de la suma de todos sus elementos

2
cqcn1991 16 feb. 2015 a las 11:40

2 respuestas

La mejor respuesta

El navegador ajustará los elementos en una nueva línea si se extienden más allá del borde derecho, por lo que el ancho del elemento principal será del 100% (máximo). Para evitar esto tienes dos soluciones:

Utilice display: inline-block y 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>

Utilice display: table y 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>
4
Salman A 16 feb. 2015 a las 09:32

Para tener éxito con lo que necesita, debe agregar jQuery a su código para sumar el ancho de todos sus elementos secundarios. Tengo una demostración aquí de lo que intentas tener éxito.

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);
)}

Referencias:

Hacer que el contenido se desplace horizontalmente dentro de un div

Calcular el ancho total de los niños con jQuery

0
Community 23 may. 2017 a las 12:27