Border of text input element goes beyond containing table
With the following HTML, the input element's width goes beyond the edge of the table's border. What is the proper way to have the input element take up the entire cell content's but still have the same margin on the right edge as it shows on the left?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns=开发者_高级运维"http://www.w3.org/1999/xhtml">
<body>
<table style="border: 1px solid #000000;" width="100%">
<tr>
<td><input style="width:100%"/></td>
</tr>
</table>
</body>
</html>
The reason is that input widths are evaluated without taking into account the default border (and maybe padding, IIRC) of the input itself. Try setting padding: 0px; border: 0px and check it.
Also, see Problem with <input type='text' /> and <textarea> width or How can I make a TextArea 100% width without overflowing when padding is present in CSS? for a solution - this has come up before.
加载中,请稍侯......
精彩评论