Jquery 语义用户界面中的登录字段在模式内未正确对齐

我是语义用户界面的初学者，正在尝试开发一个登录表单。我希望在模式中使用登录表单，但是登录字段没有正确对齐，并且模式对话框的大小非常大。请建议修改以改善登录表单的外观

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>

HTML代码：-
归档一个Bug




登录


$（函数（）{
$（“#测试”）。单击（函数（）{
$（“.test”）.modal（'show'）；
});
$（“.test”）.modal({
closable:对
});
});

当前登录表单：

---

这个CSS应该可以解决这个问题

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

---

由于您使用的是语义UI，建议您使用内置CSS设置登录表单的样式，下面是一个简单的登录表单示例：

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-->

---

更好的解决方案！

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