html - 左侧 div 具有固定宽度，右侧 div 具有可变宽度

Question

我有一种情况，我无法更改 HTML，一切都必须用 CSS 完成。**** 在下图中，您可以看到输入框的两边都有文本.我需要将所有文本都放在左侧。包含文本的跨度具有 30 像素的固定宽度。而且我需要输入框具有流动宽度，以便它填充容器的其余部分。为了便于说明，我刚刚向第一个容器添加了背景色。

<div class="input-group input-prepend">
    <input name="monthlyBudget" class="form-control" placeholder="0" required="" data-bind="number, live: monthlyBudget" data-parsley-min="50" data-parsley-max="5000" data-parsley-validation-threshold="1" data-parsley-trigger="keyup" data-parsley-errors-container="#affordabilityCalErrorBudget" type="text">
    <span class="input-group-addon add-on">$</span>
</div>

表单的完整 HTML:

<form class="calculators-form-inputs no-submit" id="form-calculator-affordability" name="calculator-affordability" data-parsley-validate="">
        <div class="calculators-info-text">
            <h2>How Much Car Can I Afford?</h2>
            <p>Great question. Fill in the boxes below to help with the answer and determine what price you can afford to pay for a car.</p>
        </div>
        <div class="calculators-form-field credit-amount">
            <div class="calculators-labels">
                <label>Your monthly budget                  <i class="label-tooltip icon-info-sign glyphicon glyphicon-info-sign" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip"></i>
                    <a class="calculators-helper-link" href="#" data-toggle="modal" data-target="#budgetCalModal">(Help me)</a>
                </label>
            </div>
            <div class="calculators-sliders">
                <input type="range" value="0" min="50" max="5000" step="50" tabindex="-1" data-bind="value: monthlyBudget">
            </div>
            <div class="calculators-inputs">
                <div class="input-group input-prepend">
                    <span class="input-group-addon add-on">$</span>
                    <input name="monthlyBudget" class="form-control" type="text" placeholder="0" required="" data-bind="number, live: monthlyBudget" data-parsley-min="50" data-parsley-max="5000" data-parsley-validation-threshold="1" data-parsley-trigger="keyup" data-parsley-errors-container="#affordabilityCalErrorBudget">
                </div>
            </div>
            <div class="calculators-inputs-error" id="affordabilityCalErrorBudget"></div>
        </div>
        <div class="calculators-form-field credit-term">
            <div class="calculators-labels">
                <label>Loan term<i class="label-tooltip icon-info-sign glyphicon glyphicon-info-sign" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip"></i>
                </label>
            </div>
            <div class="calculators-sliders">
                <input type="range" value="0" min="12" max="84" step="12" tabindex="-1" data-bind="value: loanTerm">
            </div>
            <div class="calculators-inputs">
                <div class="input-group input-append">
                    <input name="loanTerm" class="form-control" type="text" placeholder="0" required="" data-bind="number, live: loanTerm" data-parsley-min="12" data-parsley-max="84" data-parsley-type="digits" data-parsley-validation-threshold="1" data-parsley-trigger="keyup" data-parsley-pattern="^(12|24|36|48|60|72|84)$" data-parsley-errors-container="#affordabilityCalErrorTerm">
                    <span class="input-group-addon add-on">mo</span>
                </div>
            </div>
            <div class="calculators-inputs-error" id="affordabilityCalErrorTerm"></div>
        </div>
        <div class="calculators-form-field credit-apr">
            <div class="calculators-labels">
                <label>APR*<i class="label-tooltip icon-info-sign glyphicon glyphicon-info-sign" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip"></i>
                </label>
            </div>
            <div class="calculators-sliders">
                <input type="range" value="0" min="0" max="30" step="0.1" tabindex="-1" data-bind="value: interestRate">
            </div>
            <div class="calculators-inputs">
                <div class="input-group input-append">
                    <input name="interestRate" class="form-control" type="text" placeholder="0" required="" data-bind="number, live: interestRate" data-parsley-min="0" data-parsley-max="30" data-parsley-validation-threshold="1" data-parsley-trigger="keyup" data-parsley-pattern="^[0-9]\d*(\.\d+)?$" data-parsley-maxlength="5" data-parsley-errors-container="#affordabilityCalErrorApr">
                    <span class="input-group-addon add-on">%</span>
                </div>
            </div>
            <div class="calculators-inputs-error" id="affordabilityCalErrorApr"></div>
        </div>
        <div class="calculators-form-field credit-reduction">
            <div class="calculators-labels">
                <label>Down payment<i class="label-tooltip icon-info-sign glyphicon glyphicon-info-sign" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip"></i>
                </label>
            </div>
            <div class="calculators-sliders">
                <input type="range" value="0" min="0" max="20000" step="100" tabindex="-1" data-bind="value: dPayment">
            </div>
            <div class="calculators-inputs">
                <div class="input-group input-prepend">
                    <span class="input-group-addon add-on">$</span>
                    <input name="downPayment" class="form-control" type="text" placeholder="0" data-bind="number, live: dPayment" data-parsley-min="0" data-parsley-max="20000" data-parsley-validation-threshold="1" data-parsley-trigger="keyup" data-parsley-errors-container="#affordabilityCalErrorDown">
                </div>
            </div>
            <div class="calculators-inputs-error" id="affordabilityCalErrorDown"></div>
        </div>
        <div class="calculators-actions">
            <div class="calculators-buttons">
                <input type="submit" value="Calculate">
            </div>
        </div>
    </form>

我现在拥有的:

这是我需要的:

Answer 1

原始table 和table-cell 解决方案- http://jsfiddle.net/0jvnryhx/1/

由于来自@ChaniLastnamé 的更新，新解决方案 http://jsfiddle.net/8pq6thr7/

.input-group {
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    clear: both;
}

.add-on {
    width: 30px;
    position: absolute;
    left: 0;
    top: 0;
}

.form-control {
    margin-left: 30px;
}

然后您可以手动调整输入框的宽度以使其适合容器(视觉上是全宽)，但所有内容都需要固定宽度。