我试图将输入字段的宽度设置为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.
@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 class="todo"><div class="content"><div class="b2"><label for="finishDate">Ends:</label><input id="finishDate" class="finishDate"></div></div></div>
