Formatting WordPress Menus (without bullets, inline with text)

Question

I'm trying to add a copyright statement and footer menu to the footer area of my Twenty Ten child theme. So far I've created the child theme and added the copyright statement and footer menu to the footer.php file.

My code for the child footer.php file is:

<?php
/**
 * The template for displaying the footer.
 *
 * Contains the closing of the id=main div and all content
 * after. Calls sidebar-footer.php for bottom widgets.
 *
 * @package WordPress
 * @subpackage Twenty_Ten
 * @since Twenty Ten 1.0
 */
?>
    </div><!-- #main -->

    <div id="footer" role="contentinfo">
        <div id="colophon">

<?php
    /* A sidebar in the footer? Yep. You can can customize
     * your footer with four columns of widgets.
     */
    get_sidebar( 'footer' );
?>

            <div id="site-info">
                <!-- EDIT -->
                Copyright (c) 2013 Acme Inc. All rights reserved.
                <?php wp_nav_menu( array( 'theme_location' => 'footer-menu' ) ); ?>
                <!-- EDIT -->
            </div><!-- #site-info -->

            <div id="site-generator">
                <!-- EDIT -->
                <!-- EDIT -->
            </div><!-- #site-generator -->

        </div><!-- #colophon -->
    </div><!-- #footer -->

</div><!-- #wrapper -->

<?php
    /* Always have wp_footer() just before the closing </body>
     * tag of your theme, or you will break many plugins, which
     * generally use this hook to reference JavaScript files.
     */

    wp_footer();
?>
</body>
</html>

The problem is the formatting. Everything should be on one line without any bullets. Like:

Copyright (c) 2013 Acme Inc. All rights reserved. Privacy Policy Terms & Conditions

Instead the copyright statement is on its own line followed by the links (each on a separate line with bullets).

I tried float: left; AND list-style: none;. This works somewhat but the links are still on a separate line. Maybe it's my div structure?

Answer 1

Assuming the menu has the structure

 <div id="site-info">
    Copyright (c) 2013 Acme Inc. All rights reserved.
    <ul class='menu'>
        <li> Privacy Policy</li>
         <li>Terms and conditions</li>
    </ul>
 </div>

You will need to add the following css"

#site-info{
    display: inline-block;
    line-height: 30px; /* adjust to aling everything up or remove */
}
.menu{
       list-style: none; /* to remove the bullets */
       display:inline-block;
}
.menu li{/* this will show all the li tags inline with everything */
    display:inline-block; 
    padding: 0 20px;
}

Working demo with comments http://jsfiddle.net/NerudoMregi/x8YqP/

Answer 2

Have you tried display: inline?