How do I format this with CSS rather than tables?
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
padding-right:5px;
color:#333333;
font-size:13px;
font-family:arial,sans-serif;
align:center;
}
<ul>
<form action="login.php" method="post">
<li><input name="search" type="text" /></li>
<li><input value="Search" type="submit" /></li>
<li><a href="register.html">Register</a></li>
<li><a href="login.html">Login</a></li>
</form>
</ul>
I have this code to create a horizontal bar with a search box, search button, register link, and login link. However, I would like to have all items centered, much like YouTube's horizontal bar. Currently their Y positions begin at the top of the screen and it looks bad. If I were using HTML tables I would just center each td in the table but I am trying to program it correctly with CSS instead.
I am quite new to web programming and CSS.
PS: How does YouTube create those fancy dividers between the Browse and Upload links? I looked in the source a开发者_如何学编程nd didn't find anything. =(
Regarding the bar, they have this style on their hyperlinks:
#masthead-utility a {
border-left: 1px solid #CCCCCC;
padding: 0.1em 0.8em;
white-space: nowrap;
}
Note the border-left. Firebug is a great companion when it comes to seeing how people do things on their sites, and especially when aiding you line things up on your own sites, with its real-time editing.
I tested this it works great and is efficient in size.
<html>
<body>
<form action="login.php" method="post">
<input name="search" type="text" />
<input value="Search" type="submit" />
<a href="register.html">Register</a>
<a href="login.html">Login</a>
</form>
</body>
</html>
加载中,请稍侯......
精彩评论