固定宽度的左div和流体宽度的右div

Question

我遇到了无法更改的情况，所有的事情都必须用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;
}

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

Answer 2

应该非常简单，只需使用calc()即可。

.form-control{
  width: calc(100% - 30px);
}

这是一个CodePen

Answer 3

如果是这样的话，这是您的解决方案：

​

.input-group {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: baseline;
  align-items: baseline;

  /* make it pretty */
  background: lightgrey;
  /* whatever width you want */
  width: 300px;
}

.input-prepend span {
  /* that width you said needed to be there */
  width: 30px;
  /* align the $ against the input */
  text-align: end;
}

.input-prepend input {
  /* use all the space */
  width: 100%;
  
  /* make the input after the $ in layout */
  -webkit-order: 2;
  order: 2;
}

<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>

​

如果您需要的浏览器不支持柔性盒。有几个选择。首先，我真的很希望您能够在之前，而不是在您发布的代码之后，呈现span的输入。您还需要确保HTML中没有空格，因为这将导致本期。如果这个HTML来自于预先呈现的输出，那么您可能不会遇到这个问题。

如果您可以对HTML进行这些调整--这是您的解决方案：

​

.input-group {
  /* make it pretty */
  background: lightgrey;
  /* whatever width you want */
  width: 300px;
}

.input-prepend span {
  /* can’t set width properly while inline */
  display: inline-block;
  /* that width you said needed to be there */
  width: 30px;
  /* align the $ against the input */
  text-align: end;
}

.input-prepend input {
  /* use all the space minus the 30px from above */
  width: calc(100% - 30px);
  /* change the way width is calculated */
  box-sizing: border-box;
}

<div class="input-group input-prepend"><span class="input-group-addon add-on">$</span><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"></div>

​

最后，如果你真的不能触及你的标记，并且你不能支持柔性盒。你可以这样做，这是有点麻烦，但在计划中的事情并不可怕：

​

.input-group {
  /* make it pretty */
  background: lightgrey;
  /* whatever width you want */
  width: 300px;
  position: relative;
}

.input-group span {
  /* can’t set width properly while inline */
  display: inline-block;
  /* that width you said needed to be there */
  width: 30px;
  /* align the $ against the input */
  text-align: end;
  
  /* pull this out of flow */
  position: absolute;
  /* vertically align with input */
  top: 2px;
}

.input-group input {
  /* use all the space */
  width: 100%;
  /* allow space for $ */
  margin-left: 34px;
}

<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>

​

希望这能帮上忙！