ansaurus

Question

how to align horizontal list inside div?

Answer 1

+1 A:

is a block level element, and so takes up the entire width of container... also text-align is for aligning text. You could do something like:

.container ul{
    width:400px;
    margin:0px auto
}

DulabCMS 2010-08-19 17:38:25

thanks. this works. i would prefer to not use fixed width because in general my <ul> is auto-generated and can contain variable amount of items.

akonsu 2010-08-19 17:51:35

Answer 2

A:

Not sure how to answer your question because I can't even see the yellow stripe in FF 3.6.8

but have a look at this http://www.cssplay.co.uk/boxes/ - there are many options and it might help you out.

Ken 2010-08-19 17:46:00

thanks. i edited my markup now you will be able to see it.

akonsu 2010-08-19 17:47:57

Answer 3

A:

Try this, works on firefox and chrome

<html>
<head>
<title></title>
<style type="text/css">
    .container
    {
        background-color: yellow;
        text-align: center;
    }
    .container ul
    {
        display: inline-table;
        text-align: center;
    }
    .container li
    {
        border: solid 1px grey;
        display: block;
        float: left;
        height: 100px;
        line-height: 100px;
        list-style-type: none;
        margin: 5px;
        text-align: center;
        width: 100px;
    }
</style>
</head>
<body>
<div class="container">
    <ul>
        <li><a href="#">x</a></li>
        <li>
            <div>
                y</div>
        </li>
    </ul>
    <div style="clear: both;">
    </div>
</div>
</body>
</html>

Vinay B R 2010-08-20 06:03:52

ansaurus

tags:

views:

answers:

how to align horizontal list inside div?

related questions