輸入字段長於其包含的表單元格（HTML）

嘗試使用HTML格式化字段。我有以下：輸入字段長於其包含的表單元格（HTML）

<table style="width: 100%;" cellpadding="0px" cellspacing="0px"> 
    <tr> 
     <td style="width: 65px;"> 
      <asp:Label ID="lblKeywords" runat="server" Text="Keywords" 
       AssociatedControlID="txtKeywords" Font-Bold="true"></asp:Label> 
     </td> 
     <td> 
      <asp:TextBox ID="txtKeywords" Width="100%" runat="server" 
       MaxLength="256" placeholder="Use comma to seperate keywords." /> 
     </td> 
    </tr> 
</table>

檢查結果，文本框txtKeywords比其更長的細胞4個像素。

我假設這些是邊界的4個像素;處理這個問題的最好方法是什麼？

來源

2012-11-12 dsb

這不是html。它有一些asp.net控件。你能告訴我們結果html嗎？ –

您可以使用下面的CSS規則改變箱體尺寸爲「邊界框」：

* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
}

恕我直言，這導致行爲要容易得多神交。例如，「100％」的寬度則意味着100％，包括邊框，邊距和填充。你可以在這裏閱讀更多關於它的信息：http://paulirish.com/2012/box-sizing-border-box-ftw/

另外，作爲一個附註，考慮不要使用表來對齊你的表單域。看看我的博客文章：http://davidtanzer.net/css_vertical_align

來源

2012-11-12 08:24:29

我不會建議在通用選擇器上設置它。這很可能會搞砸他的整個佈局。 – Roman

@Roman你說得對，如果已經有很多CSS代碼，這可能是一個壞主意。 OTOH，我用這條規則開始我的所有樣式表，我認爲這讓我的生活變得更加簡單... –

https://developer.mozilla.org/en-US/docs/CSS/box-sizing

最簡單的方法是設置輸入使用box-sizing: border-box;

input.myClass { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
}

這部作品在最瀏覽器。

來源

2012-11-12 08:23:26 Roman

輸入字段長於其包含的表單元格（HTML）

回答

相關問題