Question

所以我想出了一个非常＆＃39; hacky＆＃39;在我的输入框中添加图标的方法。但是，无论输入框的宽度如何，输入框中的一部分值都会被切断。我不知道是什么原因引起的。

我的代码：

<div class="pull-right">
    <div id="date_range" class="form-control" style="background: #fff; cursor: pointer; border: 1px solid #ccc; width: 100%">
        <i class="fa fa-calendar"></i>&nbsp;
        <span></span> <b class="caret"></b><input name="daterange" style="border: none">
    </div>
</div>

https://www.dropbox.com/s/s8qvwixdxiutluq/Windows%20Software%20Development%20Kit_20160608102541.log?dl=0

我尝试增加div的宽度：

 <div class="pull-right" style="width: 300px">

它增加了div的宽度，但值仍然被截断：

Answer 1

您必须增加输入的宽度而不是div。

尝试：

<input name="daterange" style="border: none;width: 95%;">

如果有帮助，请告诉我

Answer 2

在bootstrap中执行此操作的最佳方法是使用输入组

<div class="input-group">
      <div class="input-group-addon">
          <span class="fa fa-calendar"></span>
          <b class="caret"></b>
      </div>
      <input type="text" name="daterange" class="form-control" />
    </div>

Answer 3

border:none和width: 100%他们都不以;结尾，这可能会导致您遇到的问题。但是我还没有通过测试来确定它是不是。

试试这个;

<div class="pull-right">
    <div id="date_range" class="form-control" style="background: #fff; cursor: pointer; border: 1px solid #ccc; width: 100%;">
        <i class="fa fa-calendar"></i>&nbsp;
        <span></span> <b class="caret"></b><input name="daterange" style="border: none; width:100%;">
    </div>
</div>

Answer 4

问题似乎是您的输入字段具有固定宽度。给它一个像170px或类似的em宽度的最小宽度。还要检查容器元素上的填充权。

这是一个小提琴。 https://jsfiddle.net/zjxborpt/

<强> HTML

<div class="pull-right">
    <div id="date_range" class="form-control">
        <i class="fa fa-calendar">ICON</i>&nbsp;
        <span></span> <b class="caret">^</b><input type="daterange" name="daterange" class="form-control" style="border: none" value="2016-02-25 - 2016-03-07">
    </div>
</div>

<强> CSS

#date_range {
    background: #fff;
    cursor: pointer;
    border: 1px solid #ccc;
    padding: 10px;
    display: inline-block;
}
#date_range i { width: 40px; display: inline-block; } 
#date_range .caret { width: 10px; 
    display: inline-block; 
    transform: rotate(180deg); 
    margin-right: 10px;
    position: relative;
    top: -5px;
}

#date_range input { min-width: 170px; display: inline-block; }

输入元素的奇怪问题

4 个答案: