只有第一輸入元件被影響，但不是別人

下面是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 selecto的效果r僅適用於＃product-pack中的第一個輸入元素，無論我嘗試什麼，其他兩個輸入元素都不起作用。

我是否錯過了CSS或HTML？任何幫助，將不勝感激。

來源

2013-11-26 Jewel Thief

，但你的其他CSS正在壓倒它。 http://jsfiddle.net/j08691/7RT7a/2/ – j08691

好吧，我明白了，但我想指定所有產品，單位和數量div的寬度。我會怎麼做？ –

填充百分數是從包含塊（per MDN）的寬度計算。改用px或em來指定填充。

來源

2013-11-26 20:37:27 gilly3

但問題依然存在。只要設置.product-title-input，.quantity-title-input或.unit-title-input的寬度，輸入元素的高度就會改變。 –

你必須更具體。因爲當我看着你的代碼和渲染輸出時，所有東西都完全呈現我期望的樣子。你期望發生的事情不是什麼？ – gilly3

如果你想讓所有輸入的高度相同，你在輸入的父母之間有填充差異。具體這裏，

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

來源

2013-11-26 20:30:03

你忘了後<input>

Jsfiddle -添加</input>，你可以在這裏看到，所有的<input>箱現在由CSS樣式的影響（它們變成黃色），它被應用於

來源

2013-11-26 20:49:52 Luminaire

但我沒有在我的HTML中具有id「product-row」的元素。 –

啊我現在明白 - 看編輯 – Luminaire

沒問題遺留:(你的小提琴的作品，但所有包含輸入元素的div具有相同的寬度，我不想要。我想要不同的寬度。 –

只有第一輸入元件被影響，但不是別人

回答

相關問題