在语义ui中，登录字段未在模态内正确对齐

Question

我是Semantic UI的初学者并尝试开发登录表单。我想在模态中使用登录表单，但是登录字段没有正确对齐，模式对话框的大小非常大。请建议修改以改善登录表单的外观。

{{1}}

当前登录表单：

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
  });
});

Answer 2

这个CSS应该解决问题。

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