CSS:水平UL:让它居中

时间:2012-12-12 22:02:07

标签: css menu html-lists center

我正在尝试制作水平菜单/列表。它有各自独立的按钮和按钮,它们以各自的形式包装。

有很多黑客行为,我得到了所有的按钮,形式而不是表格水平对齐。

虽然我无法让整个事情集中在页面上。

有人能向我指出我没有看到的东西吗?

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

2 个答案:

答案 0 :(得分:0)

根据你的CSS:

#horizontal_li_menu_container ulhorizontal_li_menu_container_ul正在选择相同的元素。我不确定你是否意识到这一点。

此外,使用浮动时,您需要清除它们

答案 1 :(得分:0)

在页面或其他元素

中将块元素水平居中

使用

 
   #element_id{margin: 0 auto;}
 

这将使元素围绕其容器居中。

因此,要将页面水平放在页面

将以上样式应用于 ul ,而不是 li
BTW,除非ID为 horizo​​ntal_li_menu_container 的div有其他内容,否则它是多余的;如果没有它, ul 将完美地运作。
 如果这不起作用,请检查以下内容:  

        
  1. 查找 ul
  2. 中所有 li 宽度,填充和边距的总和     
  3. 确保总和等于 ul
  4. 的宽度     
  5. 确保容器div没有指定的宽度,或者它已经在页面上居中
  6.   如果所有这些都是真的,上述风格将起作用。

    希望这会有所帮助。