将输入字段对齐到左侧

Question

我现在正在为一个表单设置样式并且遇到一个非常基本的问题。 我正在使用Ionic 3应用程序，并希望输入的ngClass比正常情况更短。 如果我只是将输入的宽度设置为X％，它看起来像这样：

我的CSS看起来像这样：

.formInput{
    width:100%;
    ::placeholder{
        padding-left: 1% !important;
    }
    padding-left: 1% !important;
    margin-top: 1%;
    background-color: white;
    border: 1px solid rgb(145, 145, 145);
    border-radius: 10px ;
    color: #78C800;
}

编辑：

HTML：

<ion-item class="formItem" *ngIf="obj.show">
    <ion-label stacked>{{obj.label}}</ion-label>
  <ion-input class="formInput shorten" *ngIf="pageIsReady" type="{{obj.type}}" [placeholder]="obj.></ion-input>
</ion-item>

我在输入和离子项上尝试了float: left和text-align: left。什么都没有工作。

Answer 1

添加浮动：左;或text-align：left;在你的CSS中.formInput

编辑：

我现在得到了：你应该单独放置.formInput :: placeholder {}然后它就可以了。

.formInput{
width:100%;
float:left;
padding-left: 1% !important;
margin-top: 1%;
background-color: white;
border: 1px solid rgb(145, 145, 145);
border-radius: 10px ;
color: #78C800;
}
.formInput::placeholder{
  padding-left: 1% !important;
}

Answer 2

将float：left添加到输入字段。

.formInput{
width:100%;
float:left;
::placeholder{
  padding-left: 1% !important;
}
padding-left: 1% !important;
margin-top: 1%;
background-color: white;
border: 1px solid rgb(145, 145, 145);
border-radius: 10px ;
color: #78C800;
}

Answer 3

ion-input使用flexbox对齐内容：

来自inspect元素的默认css：

position: relative;
display: block;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
width: 100%;

使用align-self:flex-start在您的班级中保持对齐

.formInput{
      width:50%;//or X% 
      ::placeholder{
          padding-left: 1% !important;
      }
      padding-left: 1% !important;
      margin-top: 1%;
      background-color: white;
       border: 1px solid rgb(145, 145, 145);
       border-radius: 10px ;
      color: #78C800;
      align-self: flex-start;//here
  }

Answer 4

改为更改.formItem宽度。

例如：

.formItem {
    width: 60%;
    float: left;
}

.formInput {
    width: 100%;
    ...
}