I am trying to make in 1 line, an input and two buttons. The two button's width should wrap the content, and then the input should fill the width of its parent. This is what I have currently
<input id="input-field" style="display:inline-block; width:60%;"></input>
<button id="sticker-button" style="display:inline-block;">☺</button>
<button id="send-button" style="display:inline-block;">➤</button>
But I can't find the css to make a input tag fill the remaining width. Currently I just put 60%, but this clearly does not work. Like if this was android, I would have the buttons width be wrap_content
and the input's width be fill_parent
.
Does anyone know how to do this?
Thanks
I solved it with this
<div style="display:flex;">
<input id="input-field" style="width:100%;"></input>
<button id="sticker-button">☺</button>
<button id="send-button">➤</button>
</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.