Question

我的所有代码都在这个JSFiddle - http://jsfiddle.net/ugngp7ft/1/

中

HTML：

<div class="text_container_border">
    <div class="row">
        <label class="input_label">#1&nbsp;Name&nbsp;and&nbsp;Phone&nbsp;Number:</label>
            <span class="input_span">
                <input type="text" class="hidden_textfield" value=""/>
            </span>
        </div>
    <div class="row">
        <label class="input_label">#2&nbsp;Name&nbsp;and&nbsp;Phone&nbsp;Number:</label>
        <span class="input_span">
            <input type="text" class="hidden_textfield" value=""/>
        </span>
    </div>
    <div class="row">
        <label class="input_label">#3&nbsp;Name&nbsp;and&nbsp;Phone&nbsp;Number:</label>
        <span class="input_span">
            <input type="text" class="hidden_textfield" value=""/>
        </span>
    </div>
    <div class="row">
        <label class="input_label">#4&nbsp;Name&nbsp;and&nbsp;Phone&nbsp;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?

无论如何，我必须实现一个新的小块才能让我的确切代码工作，那就是＆＃34; row＆＃34;表的一部分。

一切都在JSFiddle中完美运行，但是当我在服务器的空白测试页面上实现时，文本框不会调整大小。

Answer 1

这是一个纯粹的黑客，当客户端不想花时间修复CSS时我不得不使用它。（注意 - 这不是我的代码，我被聘用来解决问题并发现了CSS问题。）

我所做的是编写纠正CSS并将其放置在最后一次读取并添加了！important以覆盖其他CSS代码。

这绝不是正确的一团，但它对我有用。

文本框忽略宽度属性，但在Jsfiddle中有效

1 个答案: