我试图将输入字段的宽度设置为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>