如何使用 CSS 而不是表格来格式化它？答案

【问题标题】：How do I format this with CSS rather than tables?如何使用 CSS 而不是表格来格式化它？
【发布时间】：2011-07-05 02:03:21
【问题描述】：

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 是如何在“浏览”和“上传”链接之间创建这些精美的分隔线的？我查看了源代码并没有找到任何东西。 =(

【问题讨论】：

标签： css alignment center css-tables

【解决方案1】：

关于栏，他们的超链接上有这种风格：

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

注意左边框。 Firebug 是查看人们如何在他们的网站上做事的绝佳伴侣，尤其是在帮助您在自己的网站上进行排列时，它的实时编辑功能。

【讨论】：

【解决方案2】：

我对此进行了测试，效果很好，尺寸也很有效。

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

【讨论】：

此代码与您对列表执行的操作相同，但效率更高。