Unordered List (UL) CSS question

Posted on 2011-04-23
Last Modified: 2012-05-11
Hey -

Our front end developer is coming up a little short right now - and I'm more of a backend guy...knowing enough about CSS to be dangerous - but in no way proficient.  So - maybe this is a stupid question - but 500 points to whoever can give me the best answer.  :)

We have an unordered list (UL) set.

Inside of that list - I want each list item to look like this.

Item                                                              Price

On the same line - with "Price" right justified.

What would the CSS be to accomplish that?

Thanks in advance!
Question by:erzoolander
    LVL 38

    Expert Comment

    by:Tom Beck
    <ul style="list-style:none;width:400px;">
            <li style="float:left;">Item</li>
            <li style="float:right;">Price</li>
    LVL 38

    Accepted Solution

    Same thing using style sheet instead of inline:

    Style Sheet:

        ul {list-style:none;width:400px;}
        .right {float:right;}
        .left {float:left;}


            <li class="left">Item</li>
            <li class="right">Price</li>
    LVL 1

    Author Closing Comment

    Thank you!

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Better Security Awareness With Threat Intelligence

    See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

    Suggested Solutions

    Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
    Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
    The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

    737 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    22 Experts available now in Live!

    Get 1:1 Help Now