CSS:水平UL:使其居中 [英] 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>
推荐答案
将块元素水平居中放置在页面或其他元素中
使用
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.
将上述样式应用于 ul ，而不应用于 li .
顺便说一句，，除非ID为 horizontal_li_menu_container 的div包含其他内容，否则为多余；如果没有它， ul 将可以完美地工作.
如果这样不起作用，请检查以下内容:
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:
- 找到该 ul 中所有 li 的宽度，内边距和边距的总和
- 确保总和等于 ul 的宽度
- 确保容器div没有指定的宽度，或者已经在页面上居中
- 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.
这篇关于CSS:水平UL:使其居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
