輸入字段的大小不正確

我有一個真正煩人的問題與調整輸入字段，我不明白它是如何工作的。輸入字段的大小不正確

我得到了這段代碼。 HTML：

<div class="container"> 

    <div class="receipt"> 
    <p class="location"></p> 
    <input type="text" id="checkoutField"> 

    <div class="checkoutButton"> 
    <a href="#/checkout"> 
     <p>some button</p> 
    </a>   
    </div> 

    </div> 
</div>

容器的最大寬度爲480px。我希望checkoutButton div和輸入字段都擴展到這個寬度限制，同時在兩邊都有20px的邊距。元素也應該具有響應性，這就是爲什麼他們沒有固定的大小。

這正常的股利，但我不能讓輸入外地工作一樣.. 我做了一個的jsfiddle包括CSS代碼藏漢：jsfiddle

爲什麼輸入表現得就像這一點，如何我是否修復它？

來源

2015-11-15 qua1ity

而不是調用個別項的權利保留&權利，最好是父容器調用填充。清潔香港的修改後的代碼 - http://jsfiddle.net/k7vzod4y/3/

.receipt { 
    padding: 0 20px 24px; 
} 
.receipt .checkoutButton { 
    margin: 0; 
} 
.receipt #checkoutField { 
    width: 100%; 
    margin: 0; 
}

希望有所幫助。

來源

2015-11-15 21:33:30 Sree

這樣做，謝謝！ – qua1ity

因此，看看你的代碼示例後，我會使用下面的方法。我在你鏈接的JSFiddle上使用了以下內容，並按照你提到的你想要的那樣工作。

設置輸入字段的寬度爲100％：

.receipt #checkoutField { 
    border: 0; 
    width: 100%; 
    height: 40px; 
    background-color: #35aba2; 
    border-radius: 4px; 
    margin-top: -6px; 
    margin-left: 20px; 
    margin-right: 20px; 
}

，然後在結賬按鈕100％的寬度，以及：

.receipt .checkoutButton { 
    width: 100%; 
    height: 50px; 
    background-color: #35aba2; 
    border-radius: 4px; 
    margin-left: 20px; 
    margin-right: 20px; 
    cursor: pointer; 
    margin-top: -6px; 
}

該方法還響應因爲我已經使用百分比是相關單位，所以他們從那裏繼承父項。因此，無論視口大小如何，100％的寬度都將始終保留在其父寬的全部範圍內。

來源

2015-11-15 21:23:07 JacobG182

一直在努力這樣藏漢，但你可以看到他們，然後在容器外部延伸。您可以通過陰影查看容器大小。這是發生了什麼http://jsfiddle.net/k7vzod4y/4/ – qua1ity

它似乎是margin-left：20px導致容器內的元素推出一點。所以刪除它的作品。 – JacobG182

可以很容易地使用CSS3 calc函數。您可以將您的寬度設置爲100% - 40px以照顧您的利潤。事情是這樣的：

.receipt #checkoutField { 
    width: calc(100% - 40px); 
    border: 0; 
    height: 40px; 
    background-color: #35aba2; 
    border-radius: 4px; 
    margin-top: -6px; 
    margin-left: 20px; 
}

您可以在行動中看到這個你更新fiddle

來源

2015-11-15 21:36:41 morgul

謝謝。這也是有效的，實際上從來沒有見過calc函數。 – qua1ity

輸入字段的大小不正確

回答

相關問題