Question

我有一个django应用程序，我需要以列表格式。我的问题是在我过滤结果后，如何在HTML中对事件列表进行样式化。我试图添加 并且它似乎没有采取，可能不是最好的做法。

我成功使用了一张桌子，但实际上并不喜欢它的外观。有没有办法使用div或span标签来获得具有适当间距的无序列表？例如，我希望我的列表看起来像

2/6/2013     Widget Company        Chicago
2/7/2013     Dodad Company2        Kansas City

而不是

2/6/2013 Widget Company Chicago
2/7/2013  Dodad Company2 Kansas City

这是我的代码，目前作为表格。

 {% if latest_events %}
     {% for event in latest_events %}
<table border="1">

     <tr>
       <td>  {{ event.event_date }}  </td> <td>{{ event.company  }}</td> <td> {{ event.venue  }} </td> <td>{{ event.city  }}</td>
     </tr>

     </table> 
{% endfor %}
</ul>
{% else %}
    <p>No Events are available.</p>
{% endif %}

Answer 1

使用center模板标签 - 它将为您完成工作。

可用的替代方案：ljust和rjust

Answer 2

如果您想要的只是元素之间的额外间距，请添加一些填充。

http://jsfiddle.net/n762q/

table.associates td, table.associates th {
    padding-right: 2em;
}

<table class="associates">
    <thead>
        <tr>
            <th>Date</th>
            <th>Company</th>
            <th>City</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>2/6/2013</td>
            <td>Widget Company</td>
            <td>Chicago</td>
        </tr>

        <tr>
            <td>2/7/2013</td>
            <td>Dodad Company2</td>
            <td>Kansas City</td>
        </tr>
    </tbody>
</table>

或者，您可以在单元格或表格本身上指定min-width。

http://jsfiddle.net/n762q/1/

table.associates {
    min-width: 70%;
}

Answer 3

此处的问题是浏览器会删除空格序列，因此（_ =空格）____将变为_。如上所述，解决方案是为您的桌子设计样式。

在table元素上设置宽度可能会为您提供所需的结果，因为默认情况下表格不会消耗超过必要的宽度。然而，他们随着宽度的变化调整细胞。

Answer 4

想想你的目标是什么？要实现这一点，不仅是 Django 或 Python，您还可以使用 css style ，例如:

<table border=1px style="width:100%;">
<tr>
       <td style="padding-left:10px; width=100px;"> {{ event.event_date }} </td> 
       <td style="text-align:center;width=40px;"> {{ event.company  }} </td> 
       <td style="text-align:center;width=40px;"> {{ event.venue  }} </td>
       <td style="text-align:center; width=40px;"> {{ event.city  }} </td>
</tr>
</table>

Answer 5

您只在这里处理HTML，我推荐使用Twitter Bootstrap，因为它带有许多你可以使用的好东西（style / css），而且非常容易使用。例如，它有表格，可以查看它Twitter Boostrap tables或者网格Twitter Bootstrap Grid

Django模板中的HTML空格

5 个答案: