CSS - UL , LI inline-block

  • 1001
  • 0

摘要: CSS - UL , LI inline-block

參考連結

http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

 


<html>
    <head>
    </head>
	<style>
	    ul#display-inline-block-example{
		    width:300px;
			border:1px solid #000;
		}
		ul#display-inline-block-example,
		ul#display-inline-block-example li {
			/* Setting a common base */
			margin: 5;
			padding: 0;
		}
		
	    ul#display-inline-block-example{
		    width:300px;
			border:1px solid #000;
		}
		
		ul#display-inline-block-example li {
			display: inline-block;
			width: 100px;
			min-height: 100px;
			background: #ccc;
			vertical-align: top;
			zoom: 1;
			*display: inline;			
		}
	</style>

    <body>
		<ul id="display-inline-block-example">
			<li>Item one</li>
			<li>Item two</li>
			<li>Item three</li>
		</ul>
    </body>
</html>