[英]In HTML, how can I make a control take up all the horizontal space of its container without overlapping the border?
考慮以下HTML：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<table cellspacing = "10" cellpadding="0" border="1" width="100%">
<tr>
<td>
<input style="border-width:1px; border-style:solid; width:100%; background-color:aqua">
</td>
</tr>
</table>
</html>
它輸出以下內容，如您所見，右側有一點重疊。
如何更改此代碼，以使輸入框占據TD的整個內部空間而不會重疊？
請注意，我正在尋找以下解決方案：
謝謝。
如JamWaffles所述，在輸入標簽的style元素上添加box-sizing：border-box解決了該問題。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<table cellspacing = "10" cellpadding="0" border="1" width="100%">
<tr>
<td>
<input style="box-sizing: border-box; border-width:1px; border-style:solid; width:100%; background-color:aqua">
</td>
</tr>
</table>
</body>
</html>
在HTML中，如何使控件占用左列的所有水平空間而不轉到下一行
[英]In HTML, how can I make a control take up all the horizontal space of the left column without going to the next line
如何使浮動的DIV占據其容器的水平空間？
[英]How do I make floated DIV's take up the horizontal space of their container?
如何使中心面板展開以占據extjs邊框布局中的全部可用空間？
[英]How can I make a center panel expand to take up full available space in an extjs border layout?
當父級溢出時如何使子級div占用所有水平空間：滾動
[英]How to make a child div take up all the horizontal space when the parent has overflow: scroll
如何制作一個表格及其所有內容都采用HTML中其父容器的確切寬度和高度？
[英]How to make a table and all of its contents take the exact width and height of its parent container in HTML?
如何在不指定寬度的情況下使 div 占據所有可用的剩余水平空間？
[英]How to make a div occupy all available remaining horizontal space without specifying its width?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.