我所有的代碼工作在這裏提出這個的jsfiddle - http://jsfiddle.net/ugngp7ft/1/文本框忽略width屬性,但在的jsfiddle
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中一切正常,但在我的服務器的空白測試頁上實現時,文本框不會調整大小。
你能發佈一個鏈接到你的服務器頁面嗎?我剛剛在[我自己的服務器](http://dev.stevedv.com/test.html)上重新創建了它,並且它工作正常。 – 2015-04-05 12:37:20
我不行。這是一個客戶端,它受VPN保護。這太奇怪了。這可能是他的配置嗎? – Allenph 2015-04-05 12:42:19
我從來不知道服務器配置能夠在沒有出現在DOM中的情況下對HTML/CSS進行渲染。拉起瀏覽器的調試器,通常是cmd/ctrl + alt + j,看看文檔中是否有不尋常的東西。 – 2015-04-05 12:48:26