用範圍覆蓋100％的div寬度

我遇到樣式問題。我有以下的html結構，我不能改變它，我只允許改變樣式（CSS代碼）而不是文檔的結構。我需要輸入來覆蓋紅色div的寬度的100％，但是因爲它包含在一個範圍內，所以我不能很好地適應它。用範圍覆蓋100％的div寬度

<div style="width: 100%;"> 
    <div style="background-color: red; width: 100%;"> 
     <span>&nbsp;</span> 
     <label>App name</label> 
     <span class="value"> 
      <input style = "width:100%"/> 
     </span> 
     <span class="required-icon">*</span> 
    </div> 
</div>

所以，你可以幫我造型嗎？這裏the fiddle。非常感謝！

來源

2014-10-30 gal007

跨度是你div的寬度的100％。只有輸入因其邊界而較大。嘗試邊框：無輸入 – boyd 2014-10-30 15:44:40

竊取輸入的邊界或填充是作弊行爲，可能不是您想要實現的。

相反，加box-sizing: border-box;到input：

（更新小提琴）：

input{ 
    background:yellow; 
    display: block; 
    width: 100%; 
    box-sizing: border-box; 
}

默認情況下，width: 100%指的是輸入的內容，即沒有其填充。要將寬度引用到實際的邊框（我們大多數人可能會期望的），請使用上述的css屬性。

來源

2014-10-30 15:47:31

您必須添加padding:0，並且可以執行border:0或width: calc(100% - 3px);。

示例here。

來源

2014-10-30 15:43:51

用範圍覆蓋100％的div寬度

回答

相關問題