How to add more items to the list without going to the next row? [closed]


Tags: jquery,html,css,css3

Problem :

My list can fit up to 6 items, and it's laid out like this:

enter image description here

Now, I want to make it fit more than 6, but I don't want to display the extra one on the new row either.

Simple Logic: If there are 6 or more item, create them to right of the list and show the big > so that the users will know that there is more.

How do I do that? Can I use the CSS Carousel to get this done? Will I need JS?



Solution :

Have a look at the overflow property in Css. If it is set to scroll the content is clipped if you provide the proper width. An example css is shown below

div {
    width: 100px;
    height: 200px;
    overflow: scroll;
}

Good luck!


    CSS Howto..

    how to position a css sprite as background for another class

    How to override display: table cell

    How can I prevent the seconds portion from displaying on the HTML5 time input element?

    How to prevent “jerking” of page in browser

    How To Display first 50 characters Of Text [closed]

    How to center a block of social icon background images?

    How to make my SVG map render correctly in the browser?

    How can I get IE8 to accept a css :before tag?

    How to convert HTML button to HTML input, while keeping all CSS?

    how to unset max-height?

    CSS media query height greater than width and visa versa (or how to imitate with JavaScript)

    How to positioning an element over another in CSS

    How to use Image instead of border-right with CSS in Wordpress?

    How to use CSS to square the corner on a submit button

    How to vertically align text inside
  • in a CSS based drop-down menu?
  • How to move an image up and down smoothly with CSS?

    How to make text stay in place regardless of the monitor size?

    How to add custom tag to a header to make the font size larger in WordPress? [closed]

    (HTML/CSS) How do I repeat items like on Google or Reddit?

    CSS - How to resize texboxes with background image when browser is resized?

    How to properly apply a css hack for IE11 transition misbehaviour

    How can I get two buttons and textareas from separate forms to display inline?

    How to make an element remain inline

    How to customize bootstrap fixed navbar-default so that li elements align downward?

    HTML/CSS/JS: How to force browser to save password from a non-'password' type input?

    How to force style HTML element?

    With twitter bootstrap, how can I make it so that there's no word wrap in tables without breaking columns?

    How to achieve following style for horizontal rule with css

    Only show wordpress featured image when shared on social media

    How quora put that image on their home page? [closed]