CSS: Horizontal UL: Getting it centered

问题

I'm trying to make a horizontal menu/list. It has a mix of independent buttons and buttons that are wrapped in their own individual forms.

With much hacking I got all of the buttons, in forms and not in forms to align horizontally.

I haven't been able to get the whole thing to center on the page though.

Could someone point out to me what I am not seeing?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <link rel="shortcut icon" href="http://localhost:7001/nsd/images/favicon.ico">
    <style type = "text/css">
        #horizontal_li_menu
        {
            margin:0 auto;
            text-align:center;
            border: 1px solid green;
            width:750px;
            list-style-type: none;
            text-decoration: none;
            padding:0 auto;
        }

        #horizontal_li_menu li 
        { 
            display: inline;
            float:left;
            padding-right: 10px;

         }

    </style>

</head>

    <body>







<ul id = "horizontal_li_menu">
    <li>
        <input value="Update" onclick="location.href='#'" name="button" type="button"/>
    </li>

    <li>
        <form name="formExportVECI" method="post" action="exportveci">
            <input name="person_id" value="661774" type="hidden">
            <input name="submitExport" value="Export To Microsoft Excel" type="submit">
        </form>

    </li>  
    <li>
        <form id="ufdh" name="formImportVECI" action="importveci" method="post" enctype="multipart/form-data">
                <input name="person_id" value="661774" type="hidden">
                <input value="Import From Microsoft Excel" path="Upload" type="submit">
                <input id="fileData" name="fileData" value="" type="file">
        </form>
    </li>

    <li>
        <input value="Search/Home" onclick="location.href='search'" name="buttonHome" type="button"/>
    </li>
    </ul>






</body></html>

回答1:

According to your CSS:

#horizontal_li_menu_container ul and horizontal_li_menu_container_ul are selecting the same element. I'm not sure if you realize this.

Also, when using floats, you need to clear them.

回答2:

To center a block element horizontally within a page, or another element

Use

 
   #element_id{margin: 0 auto;}

That will center the element around its container.

So, to center the list horizontally on the page

apply the above style to the ul, and not to the li.
BTW, unless the div with id horizontal_li_menu_container has additional content, it is redundant; the ul will work perfectly without it.
If that doesn't work, check the following:

Find the sum of the widths, paddings, and margins of all the lis in that ul
Make sure the sum equals the width of the ul
Make sure the container div has no specified width, or it has already been centered on the page

If all those are true, the above style will work.

Hope this helps.

来源：https://stackoverflow.com/questions/13849446/css-horizontal-ul-getting-it-centered

标签

css

html-lists

center