Css 只有div中的第一个输入元素生效，其他元素则不生效

以下是我在JDFIDLE中的示例：

以下是html代码：

              <div id="product-pack">
                <div name="productRow">
                    <div class="product-title-input">
                        <p class="titles">Product</p>
                        <input name="product" type="text" >
                    </div>
                    <div class="unit-title-input">
                        <p class="titles">Unit</p>
                        <input name="unit" type="text" >
                    </div>
                    <div class="quality-title-input">
                        <p class="titles">Qty.</p>
                        <input name="qty" type="text" >
                    </div>
                </div>

在JSFIDLE result中，您可以看到#产品包输入CSS选择器的效果仅适用于#产品包内的第一个输入元素，无论我如何尝试，其他两个输入元素都没有效果

---

我是否缺少CSS或HTML？任何帮助都将不胜感激。

如果您试图使所有输入的高度相同，则输入的父项之间存在填充差异。特别是在这里

#product-pack .unit-title-input {
width: 5%;
padding: 2% 1.5% 0 0;
}

---

填充百分比根据包含块（）的宽度计算得出。使用

px

或

em

来指定填充。

您忘记在

之后添加

---

正如您在这里看到的，所有的

框现在都受到css样式的影响（它们变为黄色）

它正在被应用，但是您的其他css正在覆盖它。好的，我知道了，但我想指定所有产品、单位和数量div的宽度。我该怎么做？但我的html中没有id为“product row”的元素。没有问题：（你的小提琴可以工作，但所有包含输入元素的div都有我不想要的宽度。我想要不同的宽度。“#product pack div div input{”在最后3个css条目中设置宽度时无效。好的，我更新了JSFIDLE-更改回

#产品包。产品标题输入
，不同的宽度现在生效。
的高度差是因为宽度，如果您将第一个输入的宽度设置为与其他输入的宽度相等，则高度将变为相同ut问题仍然存在。只要我尝试设置.product title input、.quantity title input或.unit title input的宽度，输入元素的高度就会改变。您必须更具体一些。因为当我查看代码和呈现的输出时，所有内容都完全按照我的预期呈现。您预期会发生什么情况？
#product-pack .unit-title-input {
width: 5%;
padding: 2% 1.5% 0 0;
}