我在这里上创建了此卡,但是其中存在一些小错误,例如锚标签与选择图像不对齐,并且由于我使用的行内填充,设计也没有响应。谁能帮我解决这个问题?
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>
我正在使用引导程序,因为我不擅长前端设计,所以我确实需要修复此用户界面