左侧div具有固定宽度，右侧div具有流体宽度

时间：2015-02-04 20:21:08

标签： html css

我的情况是无法更改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>

我现在拥有的：

enter image description here

这就是我需要的：

enter image description here

3 个答案:

答案 0 :(得分：0)

原始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以使它们适合容器（视觉上全宽），但是所有东西都需要固定宽度。

答案 1 :(得分：0)

应该很简单，只需要一个calc（）。

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

这是CodePen

答案 2 :(得分：0)

Can you support flexbox?如果是这样，这是你的解决方案：

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

如果您需要的浏览器不支持flexbox。有几个选择。首先，我真的希望你能够在输入之前呈现之前的，而不是在你发布的代码之后。您还需要确保HTML中没有空格，因为这会导致this issue。如果此HTML来自预渲染输出，您可能不会遇到此问题。

如果您可以对HTML进行调整，那么这就是您的解决方案：

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

最后，如果你真的认真无法触摸你的标记，你就无法支持flexbox。你可以这样做有点hacky但是在不太可怕的事情计划中：

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

希望有所帮助！

相关问题
最新问题