Question

我正在我的语义ui中设计一个漂亮的登录表单

我的表格正在填满整个笔记本电脑的屏幕。如何使它居中对齐。字体大小和表单大小应根据设备大小（我在其中运行应用程序）增加

有人请建议解决方案。

我的HTML代码如下。

<div class="ui center aligned grid">
    <div class="twelve wide column">        
      <div class="ui container">
        <h3>Log-in to your account</h3>
      </div>   
        <form class="ui form">
            <div class="ui stacked secondary segment">
                <div class="field">
                    <div class="ui left icon input">
                        <i class="user icon"></i>
                        <input type="text" name="email" placeholder="User Name" ng-model="username">
                    </div>
                </div>
                <div class="field">
                    <div class="ui left icon input">
                        <i class="lock icon"></i>
                        <input type="password" name="password" placeholder="Password" ng-model="password">
                    </div>
                </div>
                <div class="ui fluid large teal submit button" ng-click="login()">Login</div>
            </div>
            <div class="ui error message"></div>
        </form>
        <div class="ui message">
            New to us? <a href="http://s.codepen.io/voltron2112/debug/PqrEPM?">Register</a>
        </div>
    </div>
</div>
<style type="text/css">
/* Some basic formatting */

code {
    background-color: #E0E0E0;
    padding: 0.25em 0.3em;
    font-family: 'Lato';
    font-weight: bold;
}

.container {
    padding: 3em 0em;
}

img {
    display: block;
    max-width: 100%;
}

/* Shows content box (not negative margins) */

.grid {
    position: relative;
    padding : 3em;
}

.grid:before {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background-color: #F0F0F0;
    content: '';
    width: calc(100% - 2rem);
    height: calc(100% - 2rem);
    box-shadow: 0px 0px 0px 1px #DDDDDD inset;
}

.ui.divided.grid:before,
.celled.grid:before {
    display: none;
}

.ui.aligned .column:after {
    display: none !important;
}

.grid .column:not(.row):not(.grid):after {
    background-color: rgba(86, 61, 124, .15);
    box-shadow: 0px 0px 0px 1px rgba(86, 61, 124, 0.2) inset;
    content: "";
    display: block;
    min-height: 50px;
}

@media only screen and (max-width: 768px) {
    .stackable.grid:before {
        width: 100%;
        left: 0em;
    }
}
</style>

此致 Sabarisri

Answer 1

你需要添加这种风格

@interface DisplayConnection : NSObject
{
    UIView *_view;
    struct UnityDisplaySurfaceBase _surface;//without pointer value
}
@property(readonly, nonatomic) struct UnityDisplaySurfaceBase surface;
@property(readonly, copy, nonatomic) UIView *view;
@end
@implementation DisplayConnection 
- (UnityDisplaySurfaceBase)someValue {



Ivar inner = class_getInstanceVariable ([self class], "_surface");
ptrdiff_t offset = ivar_getOffset(inner);
unsigned char *stuffBytes = (unsigned char *)(__bridge void *)self;
UnityDisplaySurfaceBase someVar = * ((UnityDisplaySurfaceBase *)(stuffBytes + offset));

return  someVar;
}
@end

语义ui - 登录表单填充整个页面

1 个答案: