I am starting in the world of CSS and jquery and I have proposed creating a text editor options bar similar to this:
To start I made this HTML and CSS code, to generate some elements to my text editor options bar, I wanted to apply styles so that it looks like the most possible to the style of the image, but the final result is quite the opposite, especially in the options of the second div; those of the first div are aligned side by side, but the options of the second div are not.
What CSS styles could be applied to give an appearance similar to the image shown above?
ul{
list-style: none;
padding-left: 5px;
margin-bottom: 0px;
}
#sizes{
display: inline-block;
width: 92px;
padding-top: 0px;
}
#weightL {
display: inline-block;
width: 13%;
}
#italics{
display: inline-block; width: 15%;
}
#colorsPick{
display: inline-block;
width: 30%;
}
#family-font{
margin-bottom: 10px;
}
input[type=checkbox]{
display:none;
}
input[type=checkbox] + label.btn{
padding: 5px 10px;
margin: 5px 10px;
display: inline-block;
text-transform: uppercase;
font-weight: 700;
outline: none;
position: relative;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
background: rgb(239, 237, 238);
color: black;
box-shadow: 0 6px rgba(214, 209, 210);;
-webkit-transition: none;
-moz-transition: none;
transition: none;
border: none;
border-radius: 5px;
cursor: pointer;
}
input[type=checkbox] + label.btn:hover{
box-shadow: 0 4px rgba(214, 209, 210);
top: 2px;
}
input[type=checkbox]:checked + label.btn{
box-shadow: 0 0 rgba(214, 209, 210);
top: 6px;
}
<div id="first-options">
<button class="btn btn-default" id="btnTitle"><i class="fa fa-plus" style="display: inline-block;"></i> Big Text</button>
<button class="btn btn-default" id="btnSubtitle"><i class="fa fa-plus" style="display: inline-block;"></i> Small Text</button>
<button class="btn btn-default" id="btnAddText"><i class="fa fa-plus" style="display: inline-block;"></i> Text Box</button>
<button class="btn btn-default" id="btnImg"><i class="fa fa-plus" style="display: inline-block;"></i> Image</button>
<button class="btn btn-default" id="btnLink"><i class="fa fa-plus" style="display: inline-block;"></i> Link</button>
</div>
<div id="myOptionBar">
<ul>
<li id="sizes">
<div style="display: inline-block;">
<label style="display: inline-block; width: 34px;">Size </label>
<input style="display: inline-block; padding-left: 0px; padding-right: 0px; padding-bottom: 12px; padding-top: 0px;width: 54px;" type="number" id="font-size" min="14" max="100" value="34" class="form-control">
</div>
</li>
<li id="weightL">
<div style="display: block;">
<input type="checkbox" id="font-weight">
<label for="font-weight-title" class="btn"><b>Bold</b></label>
</div></li>
<li id="italics">
<div style="display: block;">
<input type="checkbox" id="font-style-title">
<label for="font-style" class="btn"><i>Italic</i></label>
</div>
</li>
<li id="colorsPick">
<div style="display: block;">
<!-- Color Picker -->
<div class="form-group">
<div class="input-group my-colorpicker2" id="color-box">
<input type="color" id="color-title" value="#000002" style="padding-top: 15px; padding-bottom: 21px;">
<div class="input-group-append">
<span class="input-group-text" style="padding-bottom: 6.5px; padding-top: 15px;"><i class="fa fa-square"></i></span>
</div>
</div>
<!-- /.input group -->
</div>
<!-- /.form group -->
</div>
</li>
</ul>
<div id="family-font">
<label style="display: inline-block;">Fonts: </label>
<select class="form-control" id="font-family" style="display: inline-block; width: 80%;">
<option value="Arial, Helvetica, sans-serif">Arial Helvetica</option>
<option value="‘Arial Black’, Gadget, sans-serif">Arial Black Gadget</option>
<option value="‘Bookman Old Style’, serif">Bookman Old Style</option>
<option value="Garamond, serif">Garamond</option>
<option value="Georgia, serif">Georgia</option>
<option value="‘Comic Sans MS’, cursive">Comic Sans MS cursive</option>
<option value="Courier, monospace">Courier monospace</option>
<option value="‘Courier New’, Courier, monospace">Courier New Courier monospace</option>
<option value="Impact, Charcoal, sans-serif">Impact Charcoal</option>
<option value="‘Lucida Console’, Monaco, monospace">Lucida Console Monaco monospace</option>
<option value="‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif">Lucida Sans Unicode</option>
<option value="‘MS Sans Serif’, Geneva, sans-serif">MS Sans Serif Geneva</option>
<option value="‘MS Serif’, ‘New York’, sans-serif">MS Serif New York</option>
<option value="‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif">Palatino Linotype</option>
<option value="Symbol, sans-serif"> Symbol, sans-serif</option>
<option value="Tahoma, Geneva, sans-serif"> Tahoma Geneva</option>
<option value="‘Times New Roman’, Times, serif">Times New Roman</option>
<option value="‘Trebuchet MS’, Helvetica, sans-serif">Trebuchet MS Helvetica</option>
<option value="Verdana, Geneva, sans-serif">Verdana Geneva</option>
<option value="Webdings, sans-serif">Webdings</option>
<option value="Wingdings, ‘Zapf Dingbats’, sans-serif">Wingdings Zapf Dingbats</option>
</select>
</div>
</div>