Force Html Input To Display Inline With Buttons
This is driving me nuts! I've read like 10 stack overflow posts, docs, etc and I just know it's going to be something basic. I don't imagine it's relevant but this is for a chrome
Solution 1:
Styling the form with flexbox as below works fine.
To prevent overflowing set the #wrapper width to 100% and the inputmin-width: 0;
If you don't want to set the input's width in CSS you can also use the HTML size attribute on <input type="text">. This will specify the width in characters. E.g: <input type="text" size="8">
html {
height: 200px;
width: 200px;
position: relative;
}
body {
margin: 0;
}
#header {
text-align: center;
}
#wrapper {
display: inline;
bottom: 0;
position: absolute;
width: 100%;
}
.categoryForm {
display: flex;
align-items: center;
width: 100%;
}
input {
min-width: 0;
}<html><head><title>Please</title><scriptsrc="popup.js"></script></head><body><h2id="header">Extension</h2><divid="div1"></div><divid="wrapper"><formclass="categoryForm"autocomplete="off"><inputtype="text"id="category" /><buttonvalue="add"id="addButton">Add</button><buttonvalue="clear"id="clearButton">Clear</button></form></div></body></html>Solution 2:
have you looked into using a standard css framework, a really popular one being bootstrap.
This will simplify your html and its not good practice to use styles in line with html
<div class="row"><divclass="form-group col-md-3"></div>
Post a Comment for "Force Html Input To Display Inline With Buttons"