создание нескольких столбцов с помощью <div> <ul> и <li>

Question

создание нескольких столбцов с помощью <div> <ul> и <li>

0

просто застрял при создании нескольких столбцов с

.Призывали несколько способов, но не могли сделать это уместным.

<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

black 13 дек. 2013, в 13:29

Источник

3

Так почему бы не использовать table для этого?
Mr. Alien 13 дек. 2013, в 12:17

Теги:

html

3 ответа

1

Как предложил г-н Алиен, просто используйте элемент <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

nkmol 13 дек. 2013, в 11:13

0

Я очистил некоторые из вашего недействительного 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/

RononDex 13 дек. 2013, в 10:36

Ещё вопросы

Так почему бы не использовать table для этого?

tr00st · Accepted Answer · 2013-12-13T10-56-00.000Z

Как предполагает г-н Алиен, может быть более целесообразным использовать таблицу для такого рода информации.

Однако, если вы уверены, что хотите использовать список, вы можете настроить отдельные элементы списка либо на флоат, либо на поток в виде встроенных блоков. Мой предпочтительный метод - это встроенный блок. Пример ниже немного отформатирован с вашего сайта, и я вытащил встроенный блок в встроенный блок 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>