[英]CSS: Horizontal UL: Getting it centered
我正在尝试制作水平菜单/列表。 它混合了独立的按钮和按其各自的形式包装的按钮。
通过大量的修改,我得到了所有按钮,这些按钮的形式不是水平对齐的形式。
不过,我无法将整个内容集中在页面上。
有人可以向我指出我没有看到的东西吗?
<!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:
#horizontal_li_menu_container ul
和horizontal_li_menu_container_ul
选择相同的元素。 我不确定你是否意识到这一点。
另外,在使用浮点数时,您需要清除它们 。
采用
#element_id{margin: 0 auto;}
这将使元素围绕其容器居中。
将以上样式应用于ul ,而不应用于li 。
顺便说一句,除非id为horizontal_li_menu_container的div有其他内容,否则它是多余的; 没有它, UL会完美地工作。
如果这样不起作用,请检查以下内容:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.