卡内容无响应

时间:2018-08-28 16:41:37

标签: html css

我在这里enter image description here上创建了此卡,但是其中存在一些小错误,例如锚标签与选择图像不对齐,并且由于我使用的行内填充,设计也没有响应。谁能帮我解决这个问题?

hr {
    border: 1px;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

#admin {
    width: 35px;
    height: 30px;
}

img :first-child {
    border: 1px solid gray;
}

.img-circle {
    border-radius: 50% !important;
    height: 50px;
    width: 50px;
    border: 1px solid gray;
}

.trim {
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
 
    a:link {
        color: rgb(7, 155, 205);
    }
    
    /* selected link */
    a:active {
        color: blue;
    }
    a {
        font-size: 15px;
    }

    .table-responsive {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    textarea
    { 
      line-height: 25px;
      background-image: linear-gradient(transparent, transparent 24px, rgb(135, 137, 138) 0px);
      background-size: 100% 25px;
      
      border: none;
      overflow: auto;
      outline:0px !important;

      -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;

    }

    .images {
        padding-left: 30px;
        margin-left: 30px;
    }

    .form-label {
        text-decoration-color: black !important;
    }
                <div class="body">
                    <form #addProfileForm="ngForm" id="addProfileForm" method="post" novalidate (ngSubmit)="save()">
                        <div class="row clearfix" style="padding-top: 25px;">
                            <div class="col-sm-6">
                                <div class="form-group form-float form-focused" style="padding-top: 20px;">
                                    <div class="form-line focused">
                                        <textarea class="validate form-control" id="slogan" name="slogan" [(ngModel)]="profileData.slogan" rows="5" required minlength="20" maxlength="250" style="resize: none; border: 0px;"></textarea>
                                        <!-- <input id="slogan" name="last-name" type="text" class="validate form-control" style="text-overflow: ellipsis;" [(ngModel)]="profileData.slogan"
                                            required minlength="4" maxlength="150" #slogan=ngModel> -->
                                        <label for="slogan" class="form-label" style="color: gray; font-size: 14px;">Slogan</label>
                                    </div>
                   
                                </div>
                        
                                    <h5 style="font-weight: normal; color: gray;">
                                        Profile Link
                                    </h5>
                         
                                <div class="col-sm-6">
                                    <a (click)="visit()">
                                        <img src="../../../assets/images/arrow-55-16.png"><u>Visit Public Profile</u></a>
                                </div>
                            
                            </div>
                            
                            <div class="col-sm-6">              
                                <div style="padding: 10px; padding-left: 70px;"><span style="padding-left: 12px; padding-bottom: 10px; color: gray;">Banner Image</span>
                                    <div class="col-sm-10" style="text-align: center; padding-top: 15px;">
                                        <img src="https://image.ibb.co/jr82V9/image_placeholder_2.jpg" style="width: 300px; height: 140px; border: 1px solid rgb(208, 206, 206);">
                                        <input style="display: none" type="file" #fileInput accept=".jpeg,.jpg,.png" (change)="handleFileInput($event.target.files)" required>
                                    
                                        <div *ngIf="!image_size">
                                            <span class="label ">
                                            <span class="text-danger">Size should be less than 20KB</span>
                                            </span>
                                        </div>
                                        <div *ngIf="!image_format">
                                            <span class="label ">
                                            <span class="text-danger">File format should be .png</span>
                                            </span>
                                        </div>
                                        <div *ngIf="image_size && image_format">
                                            <span class="label ">
                                            Max Image Size is 20kb
                                            </span>
                                        </div>
                                        <!-- <div style="padding-top: 5px;"> -->
                                            <a style="padding-left: 32px; padding-right: 32px;" (click)="fileInput.click()"><u>Choose Image</u></a>
                                        <!-- </div> -->
                                    </div> 
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" [disabled]="!addProfileForm.valid"  class="btn btn-primary waves-effect">Save</button>
                        </div>
                    </form>
                </div>
            </div>

我正在使用引导程序,因为我不擅长前端设计,所以我确实需要修复此用户界面

0 个答案:

没有答案