宽度为100％的HTML输入文本框溢出表单元格

106

有谁知道为什么宽度为100％的输入元素越过表格的单元格边框。

在下面的简单示例中，输入框超过了表格的单元格边框，结果令人震惊。经过测试，并且在Firefox，IE7和Safari上以相同的方式发生。

这对您有意义吗？我是否缺少某些内容，您知道可能的解决方案吗？

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">    
<html><head>    
   <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <!-- don't use closing slash in meta tag, it breaks HTML4.01 transitional -->
   <title>Test input text in table</title>
   <style type="text/css">      
      table {border-top: 1px solid #ff0000; border-left: 1px solid #ff0000;}
      table td {border-right: 1px solid #00ff00; border-bottom: 1px solid #00ff00;}
      input[type="text"] {width: 100%;} /* removing this would make input not to go over cells border, but they would be too short, I want them to fit cells size */
   </style>    
</head><body>

<table cellpadding="0" cellspacing="0">
   <tr>
      <td><p>column one hello babe babe babe</p></td>
      <td><p>column two hello babe more</p></td>
      <td><p>column three hello babe more and more</p></td>
   </tr>
   <tr>
      <td><input type="text" value="test"></td>
      <td><input type="text" value="test"></td>
      <td><input type="text" value="test"></td>
   </tr>
</table>

</body></html>
html  input  html-table  width 
— 马可·德马约
source
1
我建议，如果您只是使用一个表来表示输入，则可以切换为在a 或内form将labels和inputs 与a 一起使用。至少在语义上要稍微多一点。当然可以，即使您确实坚持使用，也应该使用a 。ulolformtable
— 大卫说恢复莫妮卡

Answers:

216

您可以使用CSS3 box-sizing属性包含外部填充和边框：

input[type="text"] {
     width: 100%; 
     box-sizing: border-box;
     -webkit-box-sizing:border-box;
     -moz-box-sizing: border-box;
}
— 普里科
source
1
遗憾地说，但unfortuately IE 7不处理盒正确大小。在IE 7中尝试以下操作... css3.info/preview/box-sizing或查看 css-tricks.com/box-sizing
— AnthonyVO 2012年
@AnthonyVO：是的，IE7的唯一解决方法是使用IE条件注释为其添加特定的CSS，<!--[if lt IE 8]>以及input[type="text"] {width:95%}
— Marco Demaio
24

宽度值不考虑边框或填充：

http://www.htmldog.com/reference/cssproperties/width/

您在每一侧获得2px的填充，在每一侧获得1px的边框。
100％+ 2 *（2px + 1px）= 100％+ 6px，大于父td具有的100％子内容。

您可以选择：

  • 无论是设定box-sizing: border-box;为每@ pricco的答案 ;
  • 或使用0的边距和填充（避免多余的尺寸）。
— 前夕
source
进一步回答Sr pts的问题，您可以将padding和border设置为0px，然后100％应该可以。
— 毛罗（Mauro）2010年
确实，即使没有为td设置任何填充-很好地添加了。
— 2010年
1
另外，如果填充产生了问题，则可以用来text-indent模拟文本前沿之前的填充，以及line-height用于垂直填充（尽管保留垂直填充始终不会影响宽度）。
— 大卫说恢复莫妮卡
14

诸如此类的问题width:95%;是，它们在宽大的灵活布局中看起来不合适（因为5％的像素可能像30像素）。

以下解决方案对我来说非常有效（已在Firefox，IE 9，Safari中测试）：

<table style="background-color: blue; width: 100%;" cellpadding="0" cellspacing="0">
<tr>
    <td style="background-color: red;   padding: 3px;">
        <div style="margin-right: 3px;">
            <div style="padding-right: 3px;">
                <input type="text" style="width:100%;">
            </div>
        </div>
    </td>
    <td style="background-color: purple;   padding: 3px;">
        <div style="margin-right: 3px;">
            <div style="padding-right: 3px;">
                <input type="text" style="width:100%;">
            </div>
        </div>
    </td>
    <td style="background-color: green;   padding: 3px;">
        <div style="margin-right: 3px;">
            <div style="padding-right: 3px;">
                <input type="text" style="width:100%;">
            </div>
        </div>
    </td>
</tr>
</table>

（添加了颜色，以便于注意正确的填充）

诀窍是用两个div包裹输入，外部具有3px的边距（这使其比td小3px），内部具有3px的填充。这使输入比td小6px，这是您要开始的。

我不确定这样做的原理，但是它可以工作。

在这个简单的示例中，它也仅适用于右边距为6的单个div。但是，对于我的Web应用程序，仅上述解决方案有效。 

<table style="background-color: blue; width: 100%;" cellpadding="0" cellspacing="0">
<tr>
    <td style="background-color: red;   padding: 3px;">
        <div style="margin-right: 6px;">
                <input type="text" style="width:100%;">
        </div>
    </td>
    <td style="background-color: purple;   padding: 3px;">
        <div style="margin-right: 6px;">
                <input type="text" style="width:100%;">
        </div>
    </td>
    <td style="background-color: green;   padding: 3px;">
        <div style="margin-right: 6px;">
                <input type="text" style="width:100%;">
        </div>
    </td>
</tr>
</table>
— 安德烈亚斯
source
可以运作（建议+1）。奇怪的是，我在每个<input>之前插入了一些文本，并添加了“ white-space：nowrap”以将它们保持在同一行，然后三个<inputs>溢出了表格单元格，如果我删除了所有的“ white-space：nowrap”再次工作。奇怪的。
— Jose Manuel AbarcaRodríguez18年
8

前面已经解释了这个问题，所以我只想重申一下：宽度不考虑边框和填充。对此没有讨论，但我发现可以帮到我很多忙的一个可能答案是包装您的输入。这是代码，稍后我将解释如何帮助您：

<table>
  <tr>
    <td><div style="overflow:hidden"><input style="width:100%" type="text" name="name" value="hello world" /></div></td>
  </tr>
</table>

包裹INPUT的DIV没有填充，也没有边框。这是解决方案。DIV将扩展到其容器的大小，但也会考虑边框和填充。现在，由于INPUT无边框且无垫，因此扩展到其容器大小将没有问题。另请注意，DIV的溢出设置为隐藏。似乎默认情况下，项目可以落入其容器之外，并且具有默认的可见溢出。这只是确保输入保留在其容器内并且不会尝试通过。

我已经在Chrome和Fire Fox中对此进行了测试。两者似乎都很好地尊重这一解决方案。

更新：由于我只是随机选票，所以我想说，处理溢出的更好方法是使用pricco描述的CSS3 box-sizing属性：

.myinput {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

主流浏览器似乎都很好地支持了这一点，并且它并不像溢出技巧那样“令人讨厌”。但是，使用这种方法在当前浏览器中存在一些小问题（请参阅http://caniuse.com/#search=box-sizing已知问题）。

— 大卫·彼得森
source
3
简短说明：overflow: hidden;内容仍然以完全相同的方式“戳穿”框的外部，但是内容被截断而不是显示-因此它不会与其他内容重叠。
— ANeves 2012年
2

我知道这个问题已有3年的历史了，但是对于当前的浏览器来说，问题仍然存在，人们仍在这里。现在的解决方案是calc（）：

input {
    width: calc(100% - 12px); /* IE 9,10 , Chrome, Firefox */
    width: -webkit-calc(100% - 12px); /*For safari 6.0*/
}

大多数现代浏览器都支持它。

— 木马
source
1

问题是由于输入元素框模型。我最近在尝试将移动设备的输入保持在100％时找到了一个很好的解决方案。

用另一个元素（例如div）包装您的输入。然后将所需输入的样式应用于包装div。例如：

<div class="input-wrapper">
 <input type="text" />
</div>

.input-wrapper {
    border-raius:5px;
    padding:10px;
}
.input-wrapper input[type=text] {
    width:100%;
    font-size:16px;
}

给.input-wrapper圆角填充等，随便输入，然后输入宽度为100％。您用边框等很好地填充了输入，但没有烦人的溢出！

— 幻觉
source
1

我从@hallodom的答案开始解决了这个问题。我所有的输入都包含在li的内部，因此我要做的就是设置li溢出：隐藏它以消除多余的输入溢出。

.ie7 form li {
  width:100%;
  overflow:hidden;
}

.ie7 input {
  width:100%;
}
— 切特
source
1

而不是这种保证金斗争只是

input{
    width:100%;
    background:transparent !important;
}

这样，单元格边框可见，您可以控制行背景色

— 波尔图纳克
source
0

从DOCTYPE声明中删除“ http://www.w3.org/TR/html4/loose.dtd”，它可以解决您的问题。

干杯! :)

— 露西安
source
您是说使用http://www.w3.org/TR/html4/strict.dtd严格吗？参考 w3.org/QA/2002/04/valid-dtd-list.html无论如何，这不是一个选择，因为更改DOCTYPE现在可能会影响网页中许多其他stuf的呈现。
— Marco Demaio 2011年
0

使用某些Javascript，您可以获取包含TD的确切宽度，然后将其直接分配给输入元素。

以下是原始javascript，但jQuery可以使其更整洁...

var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++)
{
    var el = inputs[i];
    if (el.style.width == '100%')
    {
        var pEl = el.parentNode;  // Assumes the parent node is the TD...
        el.style.width = pEl.offsetWidth;
    }
}

此解决方案的问题是：

1）如果您的输入包含在另一个元素（例如SPAN）中，那么您将需要循环查找TD，因为像SPAN这样的元素会包装输入并显示其大小，而不是局限于TD的大小。

2）如果您在不同级别添加了填充或边距，则可能必须从[pEl.offsetWidth]中显式减去。取决于您可以计算的HTML结构。

3）如果表列的大小是动态调整的，那么更改一个元素的大小将导致表在某些浏览器中重排，并且在顺序“固定”输入大小时可能会产生阶梯式效果。解决方案是为列指定特定的宽度（百分比或像素），或者收集新的宽度并在之后进行设置。请参见下面的代码。

var inputs = document.getElementsByTagName('input');
var newSizes = [];
for (var i = 0; i < inputs.length; i++)
{
    var el = inputs[i];
    if (el.style.width == '100%')
    {
        var pEl = el.parentNode;  // Assumes the parent node is the TD...
        newSizes.push( { el: el, width: pEl.offsetWidth });
    }
}

// Set the sizes AFTER to avoid stepping...
for (var i = 0; i < newSizes.length; i++)
{
    newSizes[i].el.style.width = newSizes[i].width;
}
— 安东尼·VO
source
0

我通过申请解决了这个问题box-sizing:border-box; 到表格单元格本身，除了对输入和包装器做同样的操作。

— 万科
source
0

我用这个解决了问题

tr td input[type=text] {
  width: 100%;
  box-sizing: border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing: border-box;
  background:transparent !important;
  border: 0px;
}
— 凯文·莫赫瓦特（Kevin Muchwat）
source
-1

我通常将输入的宽度设置为99％来解决此问题：

input {
    width: 99%;
}

您也可以删除默认样式，但这将使其不太明显，因为它是一个文本框。但是，无论如何，我将显示该代码：

input {
    width: 100%;
    border-width: 0;
    margin: 0;
    padding: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

Ad @ m

— 基尔
source
-2

问题出在border-width输入元素上。不久，请尝试将margin-left输入元素的设置为-2px。

table input {
  margin-left: -2px;
}
— Burek Pekaric
source
不要这样 只是将盒子向左移动并破坏了左边距
— cc young
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.