Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
783 views
in Technique[技术] by (71.8m points)

css alignment question

I'm having trouble with getting unordered lists aligned how I want them to. Here's an image of what I'm looking to achieve. How can I get it to look like the version on the right?

enter image description here

I will have between 1 and 6 unordered lists depending on the page, so I need a generic solution. Here's a stripped down version of the css and html I'm using:

CSS:

    body { margin: 50px auto; width: 500px; }
    ul { 
        float:left;
        margin: 0 20px 20px 0;
        padding: 0;
        width: 200px; 
    }
    li { 
        background: #ddd;
        list-style: none;
        margin: 1px 0;
        padding: 5px
    }
    li.title { background: #333; color: #fff; }

HTML:

<ul>
        <li class="title">Title A</li>
        <li>1A</li>
    </ul>
    <ul>
        <li class="title">Title B</li>
        <li>1B</li>
        <li>2B</li>
        <li>3B</li>
    </ul>
    <ul>
        <li class="title">Title C</li>
        <li>1C</li>
        <li>2C</li>
    </ul>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

float:left the ul you want in left, and float:right the ul you want at right.

Example: http://jsfiddle.net/Xdyhy/


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...