0

我有一个需要以列表格式获取的 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 %}
4

5 回答 5

0

这里的问题是浏览器会去除空白序列，因此(_ = space)____将变为_. 如上所述，解决方案是为您的表格设置样式。

只需在表格元素上设置宽度即可获得所需的结果，因为默认情况下表格不会消耗超出所需的宽度。然而，它们会随着宽度的变化来调整它们的单元格。

于 2013-02-06T19:54:34.297 回答
0

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

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在单元格或表格本身上指定 a。

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

table.associates {
    min-width: 70%;
}
于 2013-02-06T19:48:05.543 回答
0

使用中心模板标签 - 它会为您完成这项工作。

可用的替代方案：ljust和rjust

于 2013-02-06T19:23:37.583 回答
0

想想你的目标是什么？为了实现这一点，不仅仅是 Django 或 Python，您可以使用 css 样式，例如：

<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>

于 2021-02-19T14:53:26.167 回答
-1

你在这里只处理 HTML，我建议使用 Twitter Bootstrap，因为它带有很多你可以使用的好东西（样式/css），而且非常容易使用。例如，它有表格，看看它Twitter Boostrap 表格或者网格Twitter Bootstrap Grid

于 2013-02-06T19:24:49.997 回答