1

我有这个调用模板的 php 页面：

if(!isset($_GET['step']) || $_GET['step'] == "" || $_GET['step'] == 1)
{
    include("templates/install_db.html");
}
elseif(isset($_GET['step']) && $_GET['step'] == 2)
{
    include("templates/install_settings.html");
}

install_db.html 模板：

<head>
    <link href="templates/css/style.css" rel="stylesheet" type="text/css" />
</head>
<body style="background-color:cadetblue">
<div class="title"><h1>...</h1></div>
<div class="main">
    <form action="?step=2" method="post">
        <ul>
            <li>
                Database Host:
            </li>
            <li>
                <input type="text" name="host" value="localhost" />
            </li>
        </ul>
        <ul>
            <li>
                Database Username:
            </li>
            <li>
                <input type="text" name="uname" />
            </li>
        </ul>
    </form>
</div>
...

而这个 CSS 样式：

root {
display: block;
}
ul {
    display: table-row;
    text-align: center;
}
ul li {
    text-align: center;
    display: table-cell;
}
.main {
    text-align: center;
    font-family: 'Lucida Console';
}
.title {
    text-align: center;
    font-family: 'Lucida Console';
}

而且我想将 ul/li 列表居中...如果我删除 table-row / table-cell 显示属性，则列表居中，否则它会留在左侧。在我看来，列表应该居中。我做错了什么？

更新：我使用最后一个谷歌浏览器版本作为浏览器

4

1 回答 1

1

我找到了自己的解决方案... text-align 属性不适用于表格行、表格单元格等显示类型，因此我将另一个<div>放入表单并将该 div 的显示设置inline-block为解决了。

于 2011-07-27T16:45:52.127 回答