如何使用CSS而不是表格格式化?

时间:2011-02-27 01:20:54

标签: css alignment center css-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>

我有这个代码来创建一个带有搜索框,搜索按钮,注册链接和登录链接的水平栏。但是,我希望所有项目都居中,就像YouTube的横条一样。目前他们的Y位置从屏幕顶部开始,看起来很糟糕。如果我使用HTML表格,我只会将每个td放在表格中,但我试图用CSS正确编程。

我是网络编程和CSS的新手。

PS:YouTube如何在“浏览”和“上传”链接之间创建那些精美的分隔线?我查看了源代码并没有找到任何东西。 =(

2 个答案:

答案 0 :(得分:0)

关于栏,他们的超链接有这种风格:

#masthead-utility a {
    border-left: 1px solid #CCCCCC;
    padding: 0.1em 0.8em;
    white-space: nowrap;
}

注意边框左边。 Firebug是一个很好的伴侣,可以看到人们如何在他们的网站上做事情,特别是在帮助你在自己的网站上进行实时编辑的时候。

答案 1 :(得分:0)

我测试过它效果很好,尺寸也很有效。

<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>