來自Django模板的HTML空白區域

我有一個django應用程序，我需要以列表格式獲取。我的問題是過濾我的結果後，如何在HTML中設置事件列表的風格。我試圖添加 ，似乎並不需要，可能也不是最佳做法。來自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 %}

來源

2013-02-06 user808996

這*是*表格數據，它屬於一個表格。不要因爲「不喜歡它的外觀」而選擇不恰當的（或避免適當的）標籤。 – cimmanon

-1

您與HTML只處理這裏，我建議使用Twitter的引導，因爲它配備了很多的好東西（風格/ CSS）可以使用，真的是非常容易使用。例如，它有表格，看看它Twitter Boostrap tables或者網格Twitter Bootstrap Grid

來源

2013-02-06 19:24:49 PepperoniPizza

我真的很喜歡這個框架。有沒有辦法覆蓋表中的文本對齊方式？ – user808996

Twitter Bootstrap不是一個框架，你可以在Django中使用它，它只會給你一些樣式給你的模板/ HTML – PepperoniPizza

Bootstrap 圓滑，直觀，功能強大的前端框架，使Web開發更快更簡單。 – user808996

使用center模板標籤 - 它將爲您完成工作。

可用替代：ljust和rjust

來源

2013-02-06 19:23:37 Thomas

用空格填充元素不會在HTML中執行任何操作，因爲默認情況下所有空白都會壓縮爲單個空格。換句話說，100個空間與單個空間相同。 – cimmanon

如果你想要的是所有元素之間的額外間距，添加一些填充。

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

來源

2013-02-06 19:48:05 cimmanon

這裏的問題是瀏覽器剝離的白色空間的序列，所以（_ =空間）____將變得_。如上所述，解決方案是對錶格進行樣式設計。

只需在表格元素上設置寬度就可以爲您提供所需的結果，因爲表格在默認情況下不會佔用比所需寬度更多的寬度。然而，他們隨着寬度的變化調整細胞。

來源

2013-02-06 19:54:34 dennmat

來自Django模板的HTML空白區域

回答

相關問題