【发布时间】:2015-04-05 12:31:57
【问题描述】:
我所有的代码都在这个 JSFiddle 中 - http://jsfiddle.net/ugngp7ft/1/
HTML:
<div class="text_container_border">
<div class="row">
<label class="input_label">#1 Name and Phone Number:</label>
<span class="input_span">
<input type="text" class="hidden_textfield" value=""/>
</span>
</div>
<div class="row">
<label class="input_label">#2 Name and Phone Number:</label>
<span class="input_span">
<input type="text" class="hidden_textfield" value=""/>
</span>
</div>
<div class="row">
<label class="input_label">#3 Name and Phone Number:</label>
<span class="input_span">
<input type="text" class="hidden_textfield" value=""/>
</span>
</div>
<div class="row">
<label class="input_label">#4 Name and Phone Number:</label>
<span class="input_span">
<input type="text" class="hidden_textfield" value=""/>
</span>
</div>
</div>
CSS:
.row {
display: table-row;
}
.input_label {
display: table-cell;
margin: 0px;
padding: 0px;
}
.input_span {
display: table-cell;
width: 100%;
padding: 0px 10px;
}
.hidden_textfield {
width: 100%;
border: none;
outline: none;
background-color: transparent;
font-family: inherit;
font-size: inherit;
}
.text_container_border {
display: table;
width: 100%;
border: 1px solid #b2b2b2;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
}
.notes {
border: 1px solid #b2b2b2;
height:80px;
width: 100%;
overflow: auto;
resize: none;
}
它在那里完美运行。我从上一个问题的答案中得到了这个想法,该问题向我指出了一篇关于如何让文本框在父 DIV 标记中的标签后获得额外宽度的帖子。文章在-How to make text input box to occupy all the remaining width within parent block?
无论如何,我必须实现一个新的小部分,以使我的确切代码能够工作,即表格的“行”部分。
在该 JSFiddle 中一切正常,但是当在我的服务器的空白测试页面上实现时,文本框不会调整大小。
【问题讨论】:
-
您能发布一个指向您的服务器页面的链接吗?我刚刚在my own server 上重新创建了它,它工作正常。
-
我不能。它是客户端的,由 VPN 保护。这太奇怪了。莫非是他的配置?
-
我从来不知道服务器配置能够在不出现在 DOM 中的情况下影响 HTML/CSS 的呈现。拉起浏览器的调试器,一般是cmd/ctrl+alt+j,看看文档有没有异常。
-
我什么也没看到。我想我应该联系房东。
-
我联系了房东。原来有什么东西把它搞砸了。我不知道怎么做。但无论他们做了什么,都将其固定在测试页面上。但是,我有一个新问题。有大量的 CSS 是我做错的,并且其中的某些东西会导致完全相同的事情……文本框上的宽度不会调整大小。我有什么办法让它工作,或者弄清楚为什么除了我没有编写的大量 CSS 之外它没有?
标签: css textbox attributes width css-tables