html - 如何设置输入标签的宽度100%

Question

我在他旁边有输入标签我有小图标，现在我不想将输入标签宽度设置为 100%，并且在不同的屏幕上适合显示，但我不能尝试使用 css 技巧 < strong>计算

宽度:calc(100%-100px) !important;

http://jsfiddle.net/p0s8yad7/

HTML

<div class="one-row-location">
        <label class="item item-input location-input">

          <input  class="input-label inputlocation" type="text" name="geolocation" id="geolocation" placeholder="Lokation" value="">
        </label><div class="location-icon">
    <img src="http://oi62.tinypic.com/10ng7b5.jpg">
        </div>

CSS

.one-row-location{
    margin-bottom:20px;
    margin-right:20px;
    margin-left:20px;
}
.item-input{
    padding:0;
    background-color:#fff ! important;
    margin-bottom:20px;
    margin-left:20px;
    margin-right:20px;

  ! important;

}

.item-input .input-label{
    font-size:14px;
    color:#99999f;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight:300;
    font-style: italic;

}
.input-label{
    padding-right: 4px ! important;
    word-wrap: break-word;
        width:calc(100%-100px) !important;
}

Answer 1

我相信这就是作者的要求: http://jsfiddle.net/p0s8yad7/3/

HTML

<div class="one-row-location">
<div class="location-icon"><img src="http://oi62.tinypic.com/10ng7b5.jpg"></div>
      <div class="location-field"><input  class="input-label inputlocation" type="text" name="geolocation" id="geolocation" placeholder="Lokation" value="" />
    </div>

和 CSS

    .one-row-location {
  width: 80%;  // For demonstartion purposes - this width can be whatever is needed
  display: table;
}
.location-field{
    display: table-cell;
    width: 100%;
    vertical-align: top;
}
.inputlocation{
    font-size:14px;
    color:#99999f;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight:300;
    font-style: italic;
    height:27px;
    width:100%;
    margin-left: 0px;
}
.location-icon {
    display: table-cell;
    width: 29px;
    height:33px;
}