Grow your CSS skills. Land your dream job.

Horizontal scrolling inside

    • # June 15, 2012 at 6:04 pm

      http://jsfiddle.net/tTuaF/7/

      The example is clear. I want to have an horizontal scroll in the ol but the 3 is going down.

      # June 15, 2012 at 6:31 pm

      Surround the ordered list with a wrapper:




      1. 1

      2. 1

      3. 1



      Remove overflow: auto from the ordered list and add it to the wrapper. Make sure the wrapper has a fixed width:



      .wrapper {
      overflow: auto;
      width: 30px;
      }

      ol {
      width: 30px;
      }

      li {
      display:inline-block;
      }

      The wrapper should now act as a window within which the ol will scroll.

      # June 16, 2012 at 12:27 am

      You can add white-space:nowrap; to the ol block to prevent the text from wrapping.

      # June 16, 2012 at 1:20 am

      @Meta_Ing much more elegant your way :)

      # June 18, 2012 at 11:54 am

      @Meta_Ing your solution worked, thank you!

    Viewing 5 posts - 1 through 5 (of 5 total)

    You must be logged in to reply to this topic.

    *May or may not contain any actual "CSS" or "Tricks".