Question

我旁边有输入标签，我有一个小图标，现在我不想设置输入标签宽度100％，并且在不同的屏幕上适合显示，但我不能尝试使用css技巧 calc

宽度：计算（100％-100px）！重要;

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

请勿在输入中包装标签。然后将输入和img放在div中并向左添加float到img并向右浮动到输入。

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

这是一个小提琴 http://jsfiddle.net/1vhhL6p0/

Answer 2

我相信这是作者要求的： 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;
}

如何设置输入标签的宽度100％

2 个答案: