Question

我是前端开发的初学者，并且正在调查网站上工作。我的网站上有很多输入字段，我想根据其性质更改其宽度，但是由于某些原因，我无法执行此操作。该项目不在Flex容器中，但更改width属性中的值没有任何区别。

我正在尝试更改input div中customerAge字段的宽度，使其足够小以容纳2位数字。

这是我的代码笔链接：https://codepen.io/omaroz92/full/VBWbae/

对于为什么更改width属性中的值没有区别的详细解释，我将不胜感激。

body {
  background-color: #98AFC7;
}

#title {
  text-align: center;
  font-family: Arial, Times, serif;
  font-style: oblique;
  color: white;
}

#screen-belly {
  background-color: rgb(250, 250, 250);
  margin: 0 auto;
  border-radius: 4px;
  width: 75%;
  max-width: 1000px;
  padding: 10px;
  padding-top: 20px;
}

p {
  text-align: center;
  font-family: monospace, serif;
  font-size: 15px;
}

.container {
  width: 75%;
  max-width: 600px;
  margin: 0 auto;
}

.row {
  display: flex;
}

.customerAge {
  width: 100px;
}

input {
  flex: 1;
  height: 20px;
  min-width: 0;
  padding: 5px;
  margin: 10px;
  border: 1px solid #c0c0c0;
  border-radius: 2px;
}

<h1 id="title">Survey Form</h1>

<div id="screen-belly">
  <p>Please take the short Survey to hep us improve our services</p>

  <div class="container">

    <div class="row">
      <input autofocus type="text" name="name" id="name" placeholder="First name" required>
      <input type="text" name="name" id="name" placeholder="Last Name" required>
    </div>

    <div class="row">
      <input type="text" name="email" id="email" placeholder="e-Mail address" required>
    </div>

    <div class="customerAge">
      <input type="number" name="age" id="Age" placeholder="age" required>
    </div>
  </div>
</div>

Answer 1

您已经将Age输入包裹在customerAge div中。但是您已将width属性应用于父级，而不是input。您可以在CSS代码中尝试以下操作：

.customerAge input#Age {

    width: 31px;
}

您可以将31px更改为所需的值。

如果您感到困惑，则input#Age之后的.customerAge表示：input类内部的Age id的customerAge字段。 / p>

我无法通过CSS更改项目的宽度

1 个答案: