Question

以下是jdfiddle的例子：

这是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>

这是CSS：

.product-pack {
    float: left;
    width : 96%;
}

#product-pack input {
    width: 95%;
    height: 1em;
    font-size:1em;
    font-weight:bold;
    border-style: solid;
    background-color:#CCC;
    border-color:#999;
    border-width:thin;
    padding: 1% 0 1% 0;
    margin-top: 0.5%;
}

#product-pack .product-title-input, .unit-title-input, .quality-title-input {
    float: left;
    text-align: left;
} 

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

在jsfiddle结果中，你可以看到#product-pack输入CSS选择器的效果仅适用于＃product-pack内的第一个输入元素，无论我尝试什么，其他两个输入元素都没有效果。

我错过了CSS或HTML的东西吗？任何帮助将不胜感激。

Answer 1

填充百分比是根据包含块（per MDN）的宽度计算的。请改用px或em来指定填充。

Answer 2

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

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

Answer 3

您忘记在</input>

之后添加<input>

Jsfiddle -正如您在此处所见，所有<input>框现在都受到css样式的影响（它们变黄）

只有div内的第一个输入元素才会受到影

3 个答案: