CSS: Horizontal UL: Getting it centered
- by Steve
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">
<link rel="StyleSheet" href="veci_files/nsd.css" type="text/css">
<style type = "text/css">
#horizontal_li_menu_container ul
{
margin-left: auto;
margin-right:auto;
text-align:center;
border: 1px solid green;
width:1000px;
}
#horizontal_li_menu_container_ul
{
list-style-type: none;
text-decoration: none;
border: 1px solid red;
}
#horizontal_li_menu_container li { display: inline;float:left; }
</style>
</head>
<body>
<div id = "horizontal_li_menu_container">
<ul id = "horizontal_li_menu_container_ul">
<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>
</div>
</body></html>
