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>

标签： css menu html-lists center

2条回答

可以哭但决不认输i

2楼-- · 2019-07-30 02:01

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.

0人赞添加讨论(0) 举报

萌系小妹纸

3楼-- · 2019-07-30 02:05

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.

0人赞添加讨论(0) 举报