Блог

Я пытаюсь установить ширину моего поля ввода равной 80%, но всякий раз, когда я меняю ее на %, это не работает.

Мой html:

 <div class="todo">
  <div class="content">
    <div class="b2">
        Ends:<input class="finishDate" [(ngModel)]="toDo$.finishDate">
        <mat-divider></mat-divider>
    </div>
  </div>
</div>
  

Мой полный css моего компонента todo.

    @media  screen and (min-width: 500px) {
  .todo {
    display:flex;
  }
}


.b1 input[type=text]{
  text-decoration: underline#334A5A ;
  text-transform: uppercase;
  font-weight:bold;
  font-size:19px;
  font-family: 'Old Standard TT', serif;
  color:#0C1824;
}
input {
  border:none;
  outline: none;
  width:100%;
  box-sizing:border-box;
}
.delete {
  text-align:center;
}
  

Почему бы не сделать его динамическим, чтобы вам никогда не нужно было жестко кодировать width ?

• Используйте flexbox
• Окружите свой концептуальный ярлык символом real <label> и укажите им на id из input (добавлено). Когда вы щелкаете по ярлыку, курсор фокусируется на соответствующем input
• Укажите, чтобы ввод занимал как можно больше места в строке, оставляя остальное для label

 input {
  outline: none;
  border: 1px solid red;
}

.b2 {
  display: flex;
}

.finishDate {
  flex-grow: 1;
}  

 <div class="todo">
  <div class="content">
    <div class="b2">
        <label for="finishDate">Ends:</label>
        <input id="finishDate" class="finishDate">
    </div>
  </div>
</div>  

Попробуйте добавить

 box-sizing: border-box;
  

в ваш код для ввода

ДЕМОНСТРАЦИЯ