CSS：水平UL：使其居中

Question

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>

Answer 1

According to your CSS: 根据您的CSS：

#horizontal_li_menu_container ul and horizontal_li_menu_container_ul are selecting the same element. #horizontal_li_menu_container ul和horizontal_li_menu_container_ul选择相同的元素。 I'm not sure if you realize this. 我不确定你是否意识到这一点。

Also, when using floats, you need to clear them . 另外，在使用浮点数时，您需要清除它们 。

Answer 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 . 将以上样式应用于ul ，而不应用于li 。
BTW, unless the div with id horizontal_li_menu_container has additional content, it is redundant; 顺便说一句，除非id为horizontal_li_menu_container的div有其他内容，否则它是多余的； the ul will work perfectly without it. 没有它， UL会完美地工作。
If that doesn't work, check the following: 如果这样不起作用，请检查以下内容：

Find the sum of the widths, paddings, and margins of all the li s in that ul 找出该ul中所有li的宽度，内边距和边距之和
Make sure the sum equals the width of the ul 确保总和等于ul的宽度
Make sure the container div has no specified width, or it has already been centered on the page 确保容器div没有指定的宽度，或者已经在页面上居中

If all those are true, the above style will work. 如果所有这些都是正确的，那么上面的样式将起作用。

Hope this helps. 希望这可以帮助。

CSS：水平UL：使其居中

问题描述

2 个解决方案

解决方案1
0 2012-12-12 22:38:20

解决方案2
0 2012-12-12 23:44:32

To center a block element horizontally* within a page, or another element* 在页面或另一个元素中水平将块元素居中

So, to center the list horizontally* on the page* 因此，要将列表水平放在页面的中心

CSS：水平UL：使其居中

问题描述

2 个解决方案

解决方案1 0 2012-12-12 22:38:20

解决方案2 0 2012-12-12 23:44:32

To center a block element horizontally within a page, or another element 在页面或另一个元素中水平将块元素居中

So, to center the list horizontally on the page 因此，要将列表水平放在页面的中心

解决方案1
0 2012-12-12 22:38:20

解决方案2
0 2012-12-12 23:44:32

To center a block element horizontally* within a page, or another element* 在页面或另一个元素中水平将块元素居中

So, to center the list horizontally* on the page* 因此，要将列表水平放在页面的中心