クロムの場合、div内のエレメントの幅が2番目のワンプッシュよりも100％大きい場合

Question

div内に2つの要素があります。最初は選択で、もう1つは入力です。私は選択のカバーを入力したいと思います。私はIE10とFirefoxでうまくいっています。しかし、HtmlはChromeでも望ましくない。 IEとFirefox、それはのように思える：私は選択の幅を設定した場合

$(document).ready(function() { 
 
    setclerablecombotext(); 
 
}) 
 

 
function setclerablecombotext() { 
 
    var sample = $("#mycombo"); 
 
    var wt = sample.width(); 
 
    var ht = sample.height(); 
 
    $('.clearable').width(wt - 20); 
 
    $('.clearable').css('margin-left', -(wt + 4)); 
 
}

.clearable { 
 
    border: none; 
 
    background-color: yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div style="background-color:blue;width:500px;"> 
 
    <select id="mycombo" style="width:100%;display:inline;background-color:red;border:none;"> 
 
    <option>TEST0</option> 
 
    <option>TEST1</option> 
 
    </select> 
 
    <input value="This is input" class="clearable" /> 
 
</div>

は私が働く、99％です。しかし、それは悪いようです。

Answer 1

あなたのhtmlとcssはあまり明確ではありません。だから私はこのフィドルを作りました。

これは必要なものですか？

HTML：

<div class="wrapper"> 
<select> 
    <option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
    <option value="mercedes">Mercedes</option> 
    <option value="audi">Audi</option> 
</select> 
<input type="text" placeholder="Write something here"> 
</div> 

はCSS：

.wrapper{ 
    width: 50%; 
    position: relative; 
} 

.wrapper select, 
.wrapper input{ 
    padding: 10px; 
    box-sizing: border-box; 
} 

.wrapper select{ 
    width: 100%; 
} 

.wrapper input{ 
    width: calc(100% - 30px) 
} 

.wrapper input{ 
    position: absolute; 
    top: 0; 
    left: 0 
} 

http://jsfiddle.net/unsx8L9o/

Answer 2

私はこれが最初の場所で有用なアプローチであることを確認していないにもかかわらず、問題はChromeは改行を適用するということです。 selectとinputの上のdivにwhite-space: nowrapを使用してください。

$(document).ready(function() { 
 
    setclerablecombotext(); 
 
}) 
 

 
function setclerablecombotext() { 
 
    var sample = $("#mycombo"); 
 
    var wt = sample.width(); 
 
    var ht = sample.height(); 
 
    $('.clearable').width(wt - 20); 
 
    $('.clearable').css('margin-left', -(wt + 4)); 
 
}

.clearable { 
 
    border: none; 
 
    background-color: yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div style="background-color:blue;width:500px;white-space:nowrap;"> 
 
    <select id="mycombo" style="width:100%;display:inline;background-color:red;border:none;"> 
 
    <option>TEST0</option> 
 
    <option>TEST1</option> 
 
    </select> 
 
    <input value="This is input" class="clearable" /> 
 
</div>