kumarldh/flexi-list.html

## flexi-list.html
<html>
    <head>
        <title>Flexi list</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <style>
#container{
    padding: 3px;
    color: #000;
    font-family: sans-serif;
    font-size: 15px;
    width: 500px;
    background: #eee;
    border: 1px solid #a9a9a9;
}
#container > ul{
    padding: 0;
    margin: 0;
}
#container > ul li{
    list-style-type: none;
    display: inline;
}
@media(min-width: 1159px) {
    #container > ul li{
        display: inline-block;
        width: 90px;
        padding-right: 3px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-wrap: normal;
    }
}
@media(max-width:1158px) {
    #container{
        width: 200px;
        background: #ddd;
        border: 1px solid #f00;
    }
    #container > ul li:after{
        content: ', ';
    }
}
@media(max-width:1255px) and (min-width:1159px) {
    #container{
        width: 350px;
        background: #ddd;
        border: 1px solid #0f0;
    }
}
        </style>
    </head>
    <body>
        <div id="container">
        <ul>
            <li>Andhra Pradesh</li>
            <li>Arunachal Pradesh</li>
            <li>Assam</li>
            <li>Bihar</li>
            <li>Chhattisgarh</li>
            <li>Goa</li>
            <li>Gujarat</li>
            <li>Haryana</li>
            <li>Himachal Pradesh</li>
            <li>Jammu and Kashmir</li>
            <li>Jharkhand</li>
            <li>Karnataka</li>
            <li>Kerala</li>
            <li>Madhya Pradesh</li>
            <li>Maharashtra</li>
            <li>Manipur</li>
            <li>Meghalaya</li>
            <li>Mizoram</li>
            <li>Nagaland</li>
            <li>Odisha</li>
            <li>Punjab</li>
            <li>Rajasthan</li>
            <li>Sikkim</li>
            <li>Tamil Nadu</li>
            <li>Tripura</li>
            <li>Uttar Pradesh</li>
            <li>Uttarakhand</li>
            <li>West Bengal</li>
        </ul>
        </div>
    </body>
</html>
	<html>
	<head>
	<title>Flexi list</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width">
	<style>
	#container{
	padding: 3px;
	color: #000;
	font-family: sans-serif;
	font-size: 15px;
	width: 500px;
	background: #eee;
	border: 1px solid #a9a9a9;
	}
	#container > ul{
	padding: 0;
	margin: 0;
	}
	#container > ul li{
	list-style-type: none;
	display: inline;
	}
	@media(min-width: 1159px) {
	#container > ul li{
	display: inline-block;
	width: 90px;
	padding-right: 3px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	word-wrap: normal;
	}
	}
	@media(max-width:1158px) {
	#container{
	width: 200px;
	background: #ddd;
	border: 1px solid #f00;
	}
	#container > ul li:after{
	content: ', ';
	}
	}
	@media(max-width:1255px) and (min-width:1159px) {
	#container{
	width: 350px;
	background: #ddd;
	border: 1px solid #0f0;
	}
	}
	</style>
	</head>
	<body>
	<div id="container">
	<ul>
	<li>Andhra Pradesh</li>
	<li>Arunachal Pradesh</li>
	<li>Assam</li>
	<li>Bihar</li>
	<li>Chhattisgarh</li>
	<li>Goa</li>
	<li>Gujarat</li>
	<li>Haryana</li>
	<li>Himachal Pradesh</li>
	<li>Jammu and Kashmir</li>
	<li>Jharkhand</li>
	<li>Karnataka</li>
	<li>Kerala</li>
	<li>Madhya Pradesh</li>
	<li>Maharashtra</li>
	<li>Manipur</li>
	<li>Meghalaya</li>
	<li>Mizoram</li>
	<li>Nagaland</li>
	<li>Odisha</li>
	<li>Punjab</li>
	<li>Rajasthan</li>
	<li>Sikkim</li>
	<li>Tamil Nadu</li>
	<li>Tripura</li>
	<li>Uttar Pradesh</li>
	<li>Uttarakhand</li>
	<li>West Bengal</li>
	</ul>
	</div>
	</body>
	</html>