如何使用文本框阻止DIV中的文本换行

Question

我有一行包含两个DIV。一个DIV包含一个带有％符号的文本框，该文本框保持包装到下一行。怎么预防这个？我希望文本框和％在1行。

<style type='text/css'>      
    div {
        white-space: nowrap;
        overflow: hidden;
    }

    .textboxDiscountText {
        width: 100px;
    }

    .myDIV {
        width: 150px;
    }
</style>



<div class="panel panel-default">
                <div class="panel-body" style="margin-left: 15px; margin-right: 15px">                
                    <div class="row">
                        <div class="col-xs-6 myDIV">
                            <input type="text" id="discountpercent" name="discountpercent" class="form-control input-xs textboxDiscountText" />%
                        </div>
                        <div class="col-xs-6">                            
                            @Html.RadioButtonFor(i => i.Discount_Type, "1") Off List
                            @Html.RadioButtonFor(i => i.Discount_Type, "2") Net
                        </div>

                    </div>       
                </div>
            </div>

Answer 1

让文本框的宽度小于现在的宽度，这样它就可以像这样容纳％符号

.myDiv {
    width:100px;
}
.myTextbox {
    width: 30px;
}

<div class='myDiv'>
<input type='textbox' class='myTextbox'> %
</div>

Answer 2

在CSS中添加以下内容

overflow:hidden !important;
white-space:nowrap !important;

Answer 3

你需要在%内添加<span class="percentage">然后你设置风格，我也删除了一些css代码和类名，我认为你不需要它们，就像在代码中一样下面：

＆＃13;

＆＃13;

div {
  white-space: nowrap;
  overflow: hidden;
}

.percentage {
  margin: 0px 0px 0px 2px;
  font-size: 25px;
  position: fixed;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<div class="panel panel-default">
  <div class="panel-body " style="margin-left: 15px; margin-right: 15px">
    <div class="row">
      <div class="col-xs-6">
        <input type="text" id="discountpercent" name="discountpercent" class="form-control col-xs-3 col-md-3" />
        <span class="percentage">%</span>
      </div>
      <div class=" col-xs-4 col-md-offset-2 col-xs-offset-2">
        @Html.RadioButtonFor(i => i.Discount_Type, "1") Off List
        <br>@Html.RadioButtonFor(i => i.Discount_Type, "2") Net
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我希望你想要的和你喜欢的，如果你有任何问题，请告诉我