[英]How to set an input field to use 100% of available width in a TD, minus X number of pixels?
I've got a data table which uses 100% of the available browser width. 我有一个数据表,该表使用了可用浏览器宽度的100%。 Within some of the TDs there are text input fields.
在某些TD中,有文本输入字段。 To the right of these are two links, which are used as pickers and styled as block-level elements at 16x16px.
这些链接的右边是两个链接,它们用作选取器,并以16x16px的样式设置为块级元素。 The code would look a bit like this:
代码看起来像这样:
<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>
I'd like the input field to be use 100% of the available TD width, minus the 32px (16px+16px) of the date pickers. 我希望输入字段使用可用TD宽度的100%,减去日期选择器的32px(16px + 16px)。 I've tried some techniques referenced in articles on this site but can't seem to find a working solution.
我尝试了本网站文章中引用的一些技术,但似乎找不到有效的解决方案。
Unfortunately this has to work in IE7+ under an XHTML Strict Doctype. 不幸的是,这必须在IE7 +的XHTML Strict Doctype下起作用。
Any help would be greatly appreciated. 任何帮助将不胜感激。
i know it isnt tagged, 我知道它没有标签,
but you might be able to use javascript/jquery to manipulate the DOM elements on your page (which it seems that is what you want to do) 但是您可能可以使用javascript / jquery来操纵页面上的DOM元素(看来这就是您想要做的)
so to manipulate in jquery: 所以在jQuery中操作:
$('td input').width($(this).parent().width() - 32)
You cant do this with pure CSS, but can be done with JS, 您不能使用纯CSS来做到这一点,但是可以使用JS来做到这一点,
A note on the XHTML Strict Doctype - its crap, use Transitional, The XHTML Strict DTD forces you to do stupid stuff like use JS to use target="_blank"
and other unnecessary not-niceness, I am all in favour of self closing tags as well as quoted parameters but the stuff in XHTML Strict makes me rage. 关于XHTML Strict Doctype的说明-它的废话,使用Transitional,XHTML Strict DTD强迫您做一些愚蠢的事情,例如使用JS来使用
target="_blank"
和其他不必要的不好,我都赞成使用自闭标签以及带引号的参数,但XHTML Strict中的内容使我大为恼火。
Okay, moving on. 好吧,继续前进。
The Javascript you want is: 您想要的Javascript是:
var input = document.getElementById('blah'),
wrap = document.getElementById('wrap').offsetWidth;
input.style.width = (wrap - 36) + "px";
http://jsfiddle.net/Mutant_Tractor/My2Qn/ http://jsfiddle.net/Mutant_Tractor/My2Qn/
Purely using CSS: How about using float:left
for the input type and float:right
for the date pickers? 纯粹使用CSS:如何将
float:left
用于输入类型,将float:right
用于日期选择器? Don't forget to use clear:both after the floated elements. 不要忘记在浮动元素之后使用clear:两者。 Haven't tried it but you can give it a shot.
还没有尝试过,但是您可以试一试。
OK - this adds a little extra markup but I think that it does what you want. 好的-这会增加一些额外的标记,但是我认为它可以满足您的要求。
<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>
#widthInput{display:inline-block;width:100%;}
div.holder{position:relative;padding-right:32px;}
span.anchors{position:absolute;top:0;right:0;}
The display
for the anchors has been changed to inline-block
so that the anchors can have a width set and still appear next to each other. 锚点的
display
已更改为“ inline-block
以便锚点可以设置宽度并仍然彼此相邻显示。
span.anchors
is a container for the anchors. span.anchors
是锚点的容器。 This has position:absolute
so that it is removed from the flow of the document and can be positioned where we need it to be. 它具有
position:absolute
因此可以将其从文档流中删除,并可以将其放置在我们需要的位置。
div.holder
provides a point of reference for span.anchors
as it has position:relative
. div.holder
提供了一个参考点span.anchors
因为它position:relative
。 If the td
had position:relative
then the anchors would be positioned relative to the screen as 如果
td
具有position:relative
则锚点将相对于屏幕定位为 is not a block element.
不是一个块元素。 The
padding-right
pushes the input away from the right edge so that the anchors display correctly. padding-right
的padding-right
将输入推离右侧边缘,以便锚点正确显示。
Finally, the input is given width:100%
so that it takes up all of the available space (width of the div less padding). 最后,给定输入的
width:100%
,使其占用所有可用空间(div的宽度减去填充)。 The id is added purely so that the input can be selected through CSS. 纯粹是添加了id,以便可以通过CSS选择输入。
I have tested this in FireFox, Chrome and IE and it seems to work. 我已经在FireFox,Chrome和IE中对此进行了测试,它似乎可以工作。
Why all the js for a simple little CSS tweak? 为什么所有的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>
If you can't change the order of the inputs and links in your HTML, use this instead: 如果您无法更改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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.