如何正確嵌入翡翠裏面的李標籤

Question

這應該是最簡單的事情，但由於某種原因，我沒有得到我所期望的。我的模板是愚蠢簡單：

p The following user just signed up! 
ul 
    li= user.name 
    li= user.email 
    li Sticker Code: #{user.code} 
    li: p #{user.address_line1} 
     if user.address_line2 
     p #{user.address_line2} 
     p #{user.address_city}, #{user.address_state} #{user.address_zip} 

所有我想要做的是有地址出現在一個L1標籤，與地址線2，如果它存在。相反，我在最後一個li前面得到一個換行符，而在沒有地址的時候，我得到了一個地址2的空行。我已經嘗試了大約一百萬種不同的變體，除了自己編寫惡意的HTML之外，我厭倦了將頭撞到牆上。我知道這很簡單，所以有人可以得到一些簡單的點，所以我可以專注於更緊迫的問題。

謝謝！

Answer 1

如果在Web瀏覽器中有檢查器，則可以看到DOM元素的各種屬性。這些屬性包括保證金。

默認在大多數瀏覽器是p標籤具有上方和下方自身緣。該邊距是導致地址第一行之前出現換行符的原因。

我已經重新設計你的模板，它只是使用換行符而不是段落標記有在不同的行的事情。這更有意義，因爲地址的行不是實際的段落。

p The following user just signed up! 
ul 
    li= user.name 
    li= user.email 
    li Sticker Code: #{user.code} 
    li 
    | #{user.address_line1} 
    if user.address_line2 
     br 
     | #{user.address_line2} 
    br 
    | #{user.address_city}, #{user.address_state} #{user.address_zip}