當HTML中的格式很好時，額外的線條在haml中

我使用Html中的ionic framework創建了一個簡單的登錄頁面。當HTML中的格式很好時，額外的線條在haml中

<html> 
<head> 
    <title>Login ionic form</title> 
    <link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/1.0.0- beta.9/css/ionic.css"> 
    <meta name="viewport" content="width=device-width, user-scalable=no, minimal-ui"> 
</head> 
<body> 
    <div class="bar bar-header bar-stable"> 
    <h1 class="title">Welcome!</h1> 
    </div> 
    <div class="content has-header padding"> 
    <div class="list list-inset"> 
    <label class="item item-input"> 
     <input type="text" placeholder="Username"> 
    </label> 
    <label class="item item-input"> 
     <input type="password" placeholder="Password"> 
    </label> 
    </div> 
    <button class="button button-block button-positive"> 
    Log In 
    </button> 
    <div class="row" align="center"> 
    <div class="col col-50"><button class="button button-light">Forgot Pass?  </button></div> 
    <div class="col col-50"><button class="button button-light">&nbsp;&nbsp;&nbsp;&nbsp;Sign UP&nbsp;&nbsp;&nbsp;&nbsp;</button></div> 
    </div> 
    </div> 
</body> 
</html>

但是，當我將它轉換爲HAML並與瘦我sinatra運行與格式問題。問題在於它切斷了底部的按鈕。我不知道該在哪裏看或理解爲什麼會發生這種情況。

!!! 
%html 
    %head 
    %title Login ionic form 
    %link{href: "http://code.ionicframework.com/1.0.0-beta.9/css/ionic.css", rel:  "stylesheet", type: "text/css"}/ 
    %meta{content: "width=device-width, user-scalable=no, minimal-ui", name: "viewport"}/ 
    %body 
    .bar.bar-header.bar-stable 
     %h1.title Welcome! 
    .content.has-header.padding 
     .list.list-inset 
     %label.item.item-input 
      %input{placeholder: "Username", type: "text"}/ 
     %label.item.item-input 
      %input{placeholder: "Password", type: "password"}/ 
     %button.button.button-block.button-positive 
     Log In 
     .row{align: "center"} 
     .col.col-50 
      %button.button.button-light Forgot Pass? 
     .col.col-50 
      %button.button.button-light     Sign UP

我目前的「棧」是西納特拉 HAML

已經嘗試開發和生產

我的服務器「應用程序」

%w[sinatra haml].each{|gem| require gem} 

get '/' do 
    haml :index 
end

HAML HAML /瘦服務器 HTML HTML

HAML引擎收錄 http://pastebin.com/embed_js.php?i=sQ5Pc1YK

HTML引擎收錄 http://pastebin.com/embed_js.php?i=DP4rSx31

來源

2014-07-23 user2446058

你試過了各種各樣的東西嗎？空白控制問題，例如，按鈕div中的換行符是否推動你超過你的身高？ –

你的Haml版本包含doctype，看起來這是造成這種差異的原因。嘗試在頂部添加「」我不知道Ionic，所以我不能告訴你爲什麼你的代碼像doctype這樣渲染。作爲一種解決方法，你可以省略Haml版本中的'!!!'以使其不再出現。 – matt

不得不添加一些樣式：「填充頂：xxpx;我想一些東西仍然在某處破碎，它看起來很好，但是我感覺被搶了，因爲我認爲當我從HTML> HAML轉換時，所有的東西都格式正確。

來源

2014-07-23 20:36:33 user2446058

首先，您可以檢查生成的html（渲染haml）的「源代碼」，並將其與您的「原始」html進行比較（可能首先忽略空白）。然後，如果您確實並將其解答爲答案（如您所做的那樣）並接受該答案。此外，也許調整答案，包括馬特和戴夫評論，如果他們是相關的。謝謝。 – Felix

當HTML中的格式很好時，額外的線條在haml中

回答

相關問題