Question

我有这个调用模板的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列表放在中心...如果我删除了表格行/表格单元格，那么列表中心就会停留在左边。在我看来，列表应该集中。我做错了什么？

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

Answer 1

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

居中显示：表行UL / LI列表

1 个答案: