导航条式样
<style type="text/css"> ul,li{ margin:0; padding:0; list-style:none; } #navtop{ 100%; height:45px; background-color:#ecf0f1; text-align:center; overflow:hidden; } .navtop-skin{ float:left; position:relative; left:50%; } .navtop-skin li{ float:left; margin:0px; padding:0 20px; position:relative; right:50%; line-height:40px; border:solid 0px #000; } </style>
body
<body> <h1>跨浏览器实现float:center,No CSS hacks</h1> <div id="macji"> <ul class="macji-skin"> <li>列表一,我是浮动的</li> <li>列表二</li> <li>列表三</li> <li>这里可能是N</li> <li>这里可能是N这里可能是N这里可能是N</li> <li>1</li> </ul> </div> </body>
table实现
<table align="center" bgcolor="#ecf0f1" width="100%" height="47px" style="border-radius: 0px;"> <td text-align="left" style="margin-left:10px;" > <input type="text" placeholder="Search" name="selectitem" id="selectitem" onKeyUp="AjaxTest(1,null)" type="text" style="padding-left:5px;border-radius:5px; 160px; height:25px; vertical-align:middle;"> <select id="state" name="state" onChange="getResult(this.value);" style="font-size:14px; vertical-align:middle; border-radius:5px; 128px;" > <option value="choose" >- Select -</option> <option value="ms" >Milestone</option> <option value="spt">Project Type</option> <option value="pg">Prod.Group</option> <option value="ps">Pjt. Status</option> <%-- <option value="pl">PL</option>--%> </select> <select id="city" onChange="AjaxTest(1,this.value)" style="font-size:14px; border-radius:5px;128px; vertical-align:middle;" > <option value=""><font face="Arial" style="font-size:14px;">- Select -</font></option> </select> <font color="grey" style="font-weight:bold;">Milestone </font> <select id="milestone" style="font-size:14px; border-radius:5px;128px; height:30px;vertical-align:middle; " > <option value="choose" style="font-size:14px;">- Select -</font></option> <option value="PIA" style="font-size:14px;">PIA</option> <option value="PVR" style="font-size:14px;">PVR</option> </select> <font color="grey" style="font-weight:bold;">From </font> <input type="text" id="startdate" value="2015-01-01" onClick="return Calendar('startdate');" class="text_time" style=" vertical-align:middle;padding-left:5px; font-size:14px; border-radius:5px;align:center;128px;height:25px;font-style:Arial" /> <font color="grey" style="font-weight:bold;">to</font> <!-- <input id="enddate" type="date" value="2017-01-01"/ style="border-radius:5px;"> --> <input type="text" id="enddate" value="<%=endd %>" onClick="return Calendar('enddate');" class="text_time" style="vertical-align:middle;padding-left:5px; font-size:14px; border-radius:5px;128px;height:25px;font-style:Arial"/> <%-- <input type="button" value=" " style="border-radius:5px;height:30px; background:url(images/dustbin.png) no-repeat" onclick="location='mainpage.jsp'"></input> <input type="button" value=" " style="border-radius:5px;height:30px; background:url(images/Search.JPG) no-repeat" onclick="AjaxTest(1,null)"></input>--%> <img src='images/search3.png' style="vertical-align:middle; height:30px; " onclick="AjaxTest(1,null)"/> </td> <td> <table> <tr> <td rowspan="2"><img id="obj1" src="images/clock.png" height=30px;width=30px /></td> <td><font style="font-weight:bold; font-size:12px; font-style: Arial"> Data Update Time: </font></td> </tr> <tr> <td><font color="gray" style=" font-weight:bold;font-style:Arial;font-size:12px"> <%=UpdateTime %></font></td> </tr> </table> </td> </tr> </table>