来自 Django 模板的 HTML 中的空格答案

【问题标题】：White Space in HTML from Django Template来自 Django 模板的 HTML 中的空格
【发布时间】：2013-01-22 02:49:15
【问题描述】：

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

我成功地使用了一张桌子，但真的不喜欢它的外观。有没有办法使用 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 %}

【问题讨论】：

这个是表格数据，它属于一个表格。不要仅仅因为您“不喜欢它的外观”而选择不合适的（或避免使用合适的）标签。

标签： html css django django-templates

【解决方案1】：

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

可用的替代方案：ljust 和 rjust

【讨论】：

用空格填充元素在 HTML 中不会做任何事情，因为默认情况下所有空格都被压缩为一个空格。换句话说，100 个空格和一个空格是一样的。

【解决方案2】：

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

【讨论】：

我真的很喜欢这个框架。有没有办法覆盖表格中的文本对齐方式？
Twitter Bootstrap 不是一个框架，您可以将它与 Django 一起使用，它只会为您的模板/HTML 提供一些样式
Bootstrap 时尚、直观且功能强大的前端框架，用于更快、更轻松地进行 Web 开发。
我最终使用了这个“框架”。我认为它会为我节省大量时间，而不是尝试制作自己的 CSS。我通过为每个单元格添加宽度来解决 html 的单元格宽度问题，如下所示： {{ event.venue }}

【解决方案3】：

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

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%;
}

【讨论】：

【解决方案4】：

这里的问题是浏览器会去掉空格序列，所以（_ = 空格）____ 会变成_。如上所述，解决方案是设置表格样式。

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

【讨论】：

【解决方案5】：

想想你的目标是什么？为了实现这一点，不仅仅是 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>

【讨论】：