jquery - 登录字段在语义 ui 中的模态内部未正确对齐

Question

我是语义 UI 的初学者，正在尝试开发登录表单。我想要模态登录表单，但登录字段没有正确对齐，模态对话框非常大。请提出修复建议以改进登录表单的外观。

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

由于您使用的是 Semantic-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
  });
});