输入框宽度仅支持使用像素(px)单位。

Question

我想将输入框的宽度设置为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;
}

- samuel gast

---

任何 div 中是否有任何样式？ - Scrimothy

它应该可以工作，但似乎是优先级问题。如果 .todo .content .b2 input{ width:100%; } 怎么办？ - Shihab

请分享周围容器元素的CSS。 - BugsArePeopleToo

Answer 1

为什么不将它变成动态的，这样就不需要硬编码 width 了呢？

• 使用 flexbox
• 用真正的 <label> 包围您的概念标签，并将其指向 input 的 id（已添加）。当您单击标签时，它会将光标聚焦到关联的 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>

- Andy Hoffman

Answer 2

尝试添加

。

box-sizing: border-box;

针对您的输入返回代码

演示

- Joe Koker

---

什么也不做。 - samuel gast

你能检查一下演示吗？因为这是你的代码，使用了百分比宽度和 box-sizing: border-box;，我还更改了边框以便更好地理解。 - Joe Koker