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 input min-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>
<script src="popup.js"></script>
</head>
<body>
<h2 id="header">Extension</h2>
<div id="div1"></div>
<div id="wrapper">
<form class="categoryForm" autocomplete="off">
<input type="text" id="category" />
<button value="add" id="addButton">Add</button>
<button value="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"><div class="form-group col-md-3"> </div>
Post a Comment for "Force Html Input To Display Inline With Buttons"