如何設置輸入字段以使用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>