如何设置输入字段以使用TD中可用宽度的100％，减去X像素数？

Question

我有一个数据表，该表使用了可用浏览器宽度的100％。 在某些TD中，有文本输入字段。 这些链接的右边是两个链接，它们用作选取器，并以16x16px的样式设置为块级元素。 代码看起来像这样：

<table (dynamic width)>
  <tr>
    <td (dynamic width)>
      <input type="text" (dynamic width) />
      <a href="#" style="display: block; width 16px; height 16px;"></a>
      <a href="#" style="display: block; width 16px; height 16px;"></a>
    </td>
  </tr>
</table>

我希望输入字段使用可用TD宽度的100％，减去日期选择器的32px（16px + 16px）。 我尝试了本网站文章中引用的一些技术，但似乎找不到有效的解决方案。

不幸的是，这必须在IE7 +的XHTML Strict Doctype下起作用。

任何帮助将不胜感激。

Answer 1

我知道它没有标签，

但是您可能可以使用javascript / jquery来操纵页面上的DOM元素（看来这就是您想要做的）

所以在jQuery中操作：

$('td input').width($(this).parent().width() - 32)

Answer 2

您不能使用纯CSS来做到这一点，但是可以使用JS来做到这一点，

关于XHTML Strict Doctype的说明-它的废话，使用Transitional，XHTML Strict DTD强迫您做一些愚蠢的事情，例如使用JS来使用target="_blank"和其他不必要的不​​好，我都赞成使用自闭标签以及带引号的参数，但XHTML Strict中的内容使我大为恼火。

好吧，继续前进。

您想要的Javascript是：

var input = document.getElementById('blah'),
wrap = document.getElementById('wrap').offsetWidth;
input.style.width = (wrap - 36) + "px";

http://jsfiddle.net/Mutant_Tractor/My2Qn/

Answer 3

纯粹使用CSS：如何将float:left用于输入类型，将float:right用于日期选择器？ 不要忘记在浮动元素之后使用clear：两者。 还没有尝试过，但是您可以试一试。

Answer 4

好的-这会增加一些额外的标记，但是我认为它可以满足您的要求。

HTML

<table>
  <tr>
    <td>
    <div class="holder">
      <input type="text" id="widthInput" />
      <span class="anchors">
      <a href="#" style="display: inline-block; width 16px; height 16px;">a</a>
      <a href="#" style="display: inline-block; width 16px; height 16px;">b</a>
      </span>
    </div>
    </td>
  </tr>
</table>

CSS

#widthInput{display:inline-block;width:100%;}
div.holder{position:relative;padding-right:32px;}
span.anchors{position:absolute;top:0;right:0;}

锚点的display已更改为“ inline-block以便锚点可以设置宽度并仍然彼此相邻显示。

span.anchors是锚点的容器。 它具有position:absolute因此可以将其从文档流中删除，并可以将其放置在我们需要的位置。

div.holder提供了一个参考点span.anchors因为它position:relative 。 如果td具有position:relative则锚点将相对于屏幕定位为 不是一个块元素。 padding-right的padding-right将输入推离右侧边缘，以便锚点正确显示。

最后，给定输入的width:100% ，使其占用所有可用空间（div的宽度减去填充）。 纯粹是添加了id，以便可以通过CSS选择输入。

我已经在FireFox，Chrome和IE中对此进行了测试，它似乎可以工作。

Answer 5

为什么所有的js都会进行简单的CSS调整？

<table width="100%">
    <tr>
        <td>
            <a href="#" style="float: right; width 16px; height 16px;">D2</a>
            <a href="#" style="float: right; width 16px; height 16px;">D1</a>
            <input type="text" style="display:block; margin: 0 32px 0 0;"/>
        </td>
    </tr>
</table>

如果您无法更改HTML中输入和链接的顺序，请改用以下方法：

<table width="100%">
    <tr>
        <td style="position:relative;">
            <input type="text" style="display:block; margin: 0 32px 0 0;"/>
            <a href="#" style="position: absolute; top: 0; right:0; width 16px; height 16px;">D2</a>
            <a href="#" style="position: absolute; top:0; right: 16px; width 16px; height 16px;">D1</a>
        </td>
    </tr>
</table>