CSS：水平UL：使其居中

Question

我正在嘗試制作水平菜單/列表。 它混合了獨立的按鈕和按其各自的形式包裝的按鈕。

通過大量的修改，我得到了所有按鈕，這些按鈕的形式不是水平對齊的形式。

不過，我無法將整個內容集中在頁面上。

有人可以向我指出我沒有看到的東西嗎？

<!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

根據您的CSS：

#horizontal_li_menu_container ul和horizontal_li_menu_container_ul選擇相同的元素。 我不確定你是否意識到這一點。

另外，在使用浮點數時，您需要清除它們 。

Answer 2

在頁面或另一個元素中水平將塊元素居中

采用


   #element_id{margin: 0 auto;}

這將使元素圍繞其容器居中。

因此，要將列表水平放在頁面的中心

將以上樣式應用於ul ，而不應用於li 。
順便說一句，除非id為horizontal_li_menu_container的div有其他內容，否則它是多余的； 沒有它， UL會完美地工作。
如果這樣不起作用，請檢查以下內容：

找出該ul中所有li的寬度，內邊距和邊距之和
確保總和等於ul的寬度
確保容器div沒有指定的寬度，或者已經在頁面上居中

如果所有這些都是正確的，那么上面的樣式將起作用。

希望這可以幫助。

CSS：水平UL：使其居中

問題描述

2 個解決方案

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

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

在頁面或另一個元素中水平將塊元素居中

因此，要將列表水平放在頁面的中心

CSS：水平UL：使其居中

問題描述

2 個解決方案

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

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

在頁面或另一個元素中水平將塊元素居中

因此，要將列表水平放在頁面的中心

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

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