html-输入字段的宽度仅适用于px

概述我试图将输入字段的宽度设置为80％,但是每当我将其更改为％时,它就无法正常工作.我的html：<div class='todo'> <div class='content'> <div class='b2'> Ends:<input class='finishDate' [(ngModel

我试图将输入字段的宽度设置为80％,但是每当我将其更改为％时,它就无法正常工作.

我的HTML：

<div >  <div >    <div >        Ends:<input  [(ngModel)]="todo$.finishDate">        <mat-divIDer></mat-divIDer>    </div>  </div></div>

我的待办事项组件的完整CSS.

   @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;}

最佳答案为什么不使其动态化,从而无需对宽度进行硬编码？

>使用flexBox
>用真实的< label>包围您的概念标签.并将其指向输入的ID(已添加).单击标签时,它将光标聚焦在关联的输入中
>告诉输入内容占用该行中尽可能多的空间,其余部分留给标签

input {  outline: none;  border: 1px solID red;}.b2 {  display: flex;}.finishDate {  flex-grow: 1;}

<div >  <div >    <div >        <label for="finishDate">Ends:</label>        <input ID="finishDate" >    </div>  </div></div>

总结

以上是内存溢出为你收集整理的html-输入字段的宽度仅适用于px 全部内容，希望文章能够帮你解决html-输入字段的宽度仅适用于px 所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。