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>

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

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

非常感谢任何帮助。

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将输入推离右边缘，以便锚点正确显示。

最后，输入被赋予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>

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

5 个答案:

HTML

CSS