Tuesday, December 11, 2012

Display Inline Block

Posted by at 

<html>
<head>
  <style type="text/css">
        .toolbar ul {
            display:block;
            width: 600px;
            padding: 0;
        }
        .toolbar ul li
        {
            display: inline-block;
            list-style-type: none;
            vertical-align: middle;
            border: solid 3px gray;
            margin: 2px;
        }
    </style>
</head>
<body>
    <div class="toolbar">
        <ul>
            <li><a href="#">first item<br />
                <img src='http://www.cfht.hawaii.edu/en/news/ngcfhtannounce/Banner_image2.jpg' width='100px' alt='' /><br />
                first item</a></li>
            <li><a href="#">first item<br />
                <img src='http://www.cfht.hawaii.edu/en/news/ngcfhtannounce/Banner_image2.jpg' width='100px' alt='' /><br />
                first item</a></li>
<li><a href="#">first item<br />
                <img src='http://www.cfht.hawaii.edu/en/news/ngcfhtannounce/Banner_image2.jpg' width='100px' alt='' /><br />
                first item</a></li>
<li><a href="#">first item<br />
                <img src='http://www.cfht.hawaii.edu/en/news/ngcfhtannounce/Banner_image2.jpg' width='100px' alt='' /><br />
                first item</a></li>
 <li><a href="#">first item<br />
                <img src='http://www.cfht.hawaii.edu/en/news/ngcfhtannounce/Banner_image2.jpg' width='100px' alt='' /><br />
                first item</a></li>
            <li><a href="#">first item<br />
                <img src='http://www.cfht.hawaii.edu/en/news/ngcfhtannounce/Banner_image2.jpg' width='100px' alt='' /><br />
                first item</a></li>
<li><a href="#">first item<br />
                <img src='http://www.cfht.hawaii.edu/en/news/ngcfhtannounce/Banner_image2.jpg' width='100px' alt='' /><br />
                first item</a></li>
<li><a href="#">first item<br />
                <img src='http://www.cfht.hawaii.edu/en/news/ngcfhtannounce/Banner_image2.jpg' width='100px' alt='' /><br />
                first item</a></li>
        </ul>
    </div>
</body>
</html>

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)