為什么我的 <input> 元素的內容區域超出其父<span>元素的范圍？</span>

Question

注意：由於我一直在嘗試從wordpress環境的Salent主題中提取代碼，因此我仍無法以最簡單的形式重現該問題，我可能最終會回答我自己的問題，但是請注意，感謝您的任何反饋一路走來，我希望這個問題對社區有所幫助。

到目前為止，我的問題描述如下：

---

我試圖更好地控制我的內容在屏幕上的顯示方式，似乎對CSS有些不了解。 我嘗試使用“ box-sizing：border box”屬性，該屬性在計算元素的總寬度時包括填充和邊框。 我添加了鏈接以顯示input和span元素的狀態

“ Chrome Devtool”輸入元素突出顯示

“ Chrome Devtool”跨度元素內容區域

我認為裝箱大小不起作用，因為該問題是與毛利相關的問題。 我最好的猜測是，“ margin-left”屬性影響了整個內容區域，將內容推到span元素之外。 但是我希望輸入元素包含在span元素內

感謝Lucien Dubois，添加了HTML和CSS

 * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .contact-fields input, textarea{ margin-left: 12px; } .wpcf7-form-control-wrap { display: block !important; position: relative; } div, span, h5, p { vertical-align: baseline; font-family: inherit; font-weight: inherit; font-style: inherit; font-size: 100%; outline: 0; padding: 0; margin-right: 0; border: 0 } h5 { font-family:Raleway; line-height:16px; margin-bottom: 7px; color:#444; letter-spacing:0px; font-weight:600; } .form-label { clear: both; font-size: 20px } h5 { vertical-align: baseline; font-style: inherit; outline: 0; padding: 0; margin-top: 0; margin-right: 0; margin-left: 0; border:0 } .first-name, .last-name { display: inline-block; width: 40%; margin-right: 9px; } .first-name input, .last-name input { width: 62%; } input { margin-bottom: 20px; margin-top: 5px; } 

 <div class="contact-fields"> <div class="name-section"> <div class="first-name"> <h5 class="form-label"> First Name:</h5> <p> <span class="wpcf7-form-control-wrap fname"> <input type="text" name="fname" value="" size="40" maxlength="50" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required input-field" aria-required="true" aria-invalid="false"> </span> </p> </div> <div class="last-name"> <h5 class="form-label"> Surname:</h5> <p> <span class="wpcf7-form-control-wrap lname"> <input type="text" name="lname" value="" size="40" maxlength="50" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required input-field" aria-required="true" aria-invalid="false"></span> </p> </div> </div> </div> 

Answer 1

您可以嘗試通過為輸入字段添加最小和最大屬性

input {
    min-width: 100%;
    max-width: 100%;
}