登錄字段未正確對齊語義用戶界面中的模態

Question

我是語義用戶界面的初學者，嘗試開發登錄表單。我想用模態登錄表單，但登錄字段沒有正確對齊，模態對話框的大小非常大。請建議修復以改善登錄表單的外觀。

HTML code:- 
<a class="item agenda-item" id="test"> 
    <span class="side-agenda-item"> <i class="bug icon"></i> File a Bug</span> 
    <div class="ui modal test"> 
     <div class="ui input"> 
     <input type="text" name="email" placeholder="E-mail address"> 
     </div> 
     <br> 
     <div class="ui input"> 
     <input type="password" name="password" placeholder="Password"> 
     </div> 
     <br> 
     <button class="ui primary button">Login</button> 
     <br> 
    </div> 
    </a> 

<script> 
    $(function(){ 
     $("#test").click(function(){ 
     $(".test").modal('show'); 
     }); 
     $(".test").modal({ 
     closable: true 
     }); 
    }); 
     </script> 

當前登錄表單：

Answer 1

這個CSS應該解決這個問題。

div.ui.input { 
    width: 100%; 
} 
div.ui.input input { 
    display: block; 
    margin: 0 auto !important; 
    float: none; 
} 

Answer 2

由於您使用的語義UI，建議使用內置的CSS，這裏簡單的登錄表單的例子風格你登錄表單：

[LIVE DEMO]

HTML

<!--button--> 
<a class="ui button primary" id="test"> 
Login </a> 
<!--button--> 

<!--modal--> 
<div class="ui modal test"> 
    <div class="ui middle aligned center aligned grid"> 
     <div class="column"> 
      <h2 class="ui blue image header"> 
       <img src="assets/images/logo.png" class="image"> 
       <div class="content"> 
        Log-in to your account 
       </div> 
      </h2> 
      <form class="ui large form"> 
       <div class="ui segment"> 
        <div class="field"> 
         <div class="ui left icon input"> 
          <i class="user icon"></i> 
          <input type="text" name="email" placeholder="E-mail address"> 
         </div> 
        </div> 
        <div class="field"> 
         <div class="ui left icon input"> 
          <i class="lock icon"></i> 
          <input type="password" name="password" placeholder="Password"> 
         </div> 
        </div> 
        <div class="ui fluid large primary submit button">Login</div> 
       </div> 
      </form> 

      <div class="ui message"> 
       New to us? <a href="#">Sign Up</a> 
      </div> 
     </div> 
    </div> 
</div> 
<!--modal--> 

JS（只保持你的）

$(function(){ 
    $("#test").click(function(){ 
    $(".test").modal('show'); 
    }); 
    $(".test").modal({ 
    closable: true 
    }); 
});