Question

在使用

创建多个列时遇到困难。尝试了几种方法，但无法使其合适。

<h3>Staff / Administration</h3>
<div align="center" class="center-content"><ul style="border-bottom: 1px solid #CFCFCF;"><strong>Administration</strong><br /></div>
<div class="page-style"><ul style="border-bottom: 1px solid #CFCFCF;">

<li style="width: 15%; text-align: left;"><b>NICK</b></li>
<li style="width:12%; text-align: left;"><em>Chief Executive Officer</em></li>
<li style='width:12%; text-align: center'><em>Demos</em></li>
            <li style='width:12%; text-align: center'>Maps</li>
            <li style='width:12%; text-align: center'>Movies</li>
            <li style='width:12%; text-align: center'>Server</li>
            <li style='width:12%; text-align: center'>Website</li>
</ul></div>

期望的输出是

Staff / Administration


                            administration
-------------------------------------------------------------------------------------

NICK  Chief Executive Officer    Demos    Maps    Movies   server   Website

Answer 1

正如Alien先生所建议的那样，使用表格来获取此类信息可能更合适。

但是，如果您确定要使用列表，则可以将单个列表项设置为浮动样式或作为内联块流动。我个人首选的方法是内联块。下面的示例稍微重新格式化了，我将内联块样式拉出到内联CSS块中。

<style type="text/css">
    ul.adminTable > li {
        display: inline-block;
    }
</style>
<h3>Staff / Administration</h3>
<div align="center" class="center-content"><ul style="border-bottom: 1px solid #CFCFCF;"><strong>Administration</strong><br /></div>
<div class="page-style">
    <ul style="border-bottom: 1px solid #CFCFCF;" class="adminTable">
        <li style="width: 15%; text-align: left;"><b>NICK</b></li>
        <li style="width:12%; text-align: left;"><em>Chief Executive Officer</em></li>
        <li style='width:12%; text-align: center'><em>Demos</em></li>
        <li style='width:12%; text-align: center'>Maps</li>
        <li style='width:12%; text-align: center'>Movies</li>
        <li style='width:12%; text-align: center'>Server</li>
        <li style='width:12%; text-align: center'>Website</li>
    </ul>
</div>

Answer 2

正如Alien先生建议的那样，只需使用<table>元素：

<h3>Staff / Administration</h3>
<table border="0">
    <tr>
        <th colspan="7">
            Administration
        </th>
    </tr>
    <tr>
        <th>
            Nick
        </th>
        <td>
            <em>Chief Executive Officer</em>
        </td>
        <td>
            <em>Demos</em>
        </td>
        <td>
            Maps
        </td>
        <td>
            Movies
        </td>
        <td>
            Server
        </td>
        <td>
            Website
        </td>
    </tr>
</table>

毕竟你使用表格数据，所以最后一路走。

jsFiddle

Answer 3

我清除了一些无效的html代码并添加了以下css：

.page-style{
    vertical-align: top;
}

ul {
    display: inline;
    vertical-align: top;
}
ul li {
    display: inline-block;
    width: 100px;
    vertical-align: top;
}

.administration-title {
    width: 100%;
    border-bottom: 1px solid gray;
}

在此处查看演示：
http://jsfiddle.net/T5t7q/

使用<div> <ul>和<li> </li> </ul> </div>创建多个列

3 个答案:

jsFiddle