html - Aligning mixed form input types with CSS -
i stuck hard on project. requires form, , aligning text input boxes/radio buttons/etc in straight line down page. have achieved text input boxes no problem, can't rows radio buttons, checkboxes, or textareas behave. code is:
html:
<div class="containdiv"> <label>phone <img src="circle.gif" /></label> <input type="text" name="phone" maxlength="4" size="4"> <input type="text" name="phone" maxlength="4" size="4"> <input type="text" name="phone" maxlength="4" size="4"> </div> <div class="containdiv"> <label>preferred contact <img src="circle.gif" /></label> <div class="radio"> <input type="radio" name="email" value="email"> <label for="email">email</label> <input type="radio" name="phone" value="phone"> <label for="phone">phone</label> </div> </div> css:
label { display: inline-block; float: left; clear: left; width: 250px; text-align: right; } input, select, span.radio, textarea { display: inline-block; margin: 3px; float: left; } any insight appreciated.
here pure html , css example. external resource google font added improve text. little complex play around it.
html, body { padding: 0; margin: 0; height: 100%; width: 100%; font-family: open sans; } *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .text-center { width: 100%; text-align: center; } hr { width: 80%; margin: 5px 10%; } form { width: 60%; margin: 0 20%; display: inline-block; } form .form-group { width: 100%; margin: 10px 0; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } form .form-group label, form .form-group .form-control { width: 50%; padding: 3px 10px; display: inline-block; margin: 0; } form .form-group > label { font-weight: bold; text-align: right; } form .form-group div.form-control { padding: 0; } form .form-group .checkbox, form .form-group .btn { margin-left: 50%; } form .form-group .form-control label { width: 100%; margin: 0; padding: 0; } form .form-group .form-control label.radio-inline { width: auto; display: inline-block; }<link href='http://fonts.googleapis.com/css?family=open+sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'> <!-- title --> <h1 class="text-center">form</h1> <hr> <form> <!-- email --> <div class="form-group"> <label>email</label> <input class="form-control" type="text"> </div> <!-- --> <div class="form-group"> <label>who are</label> <textarea class="form-control" rows="4"></textarea> </div> <!-- favorite number --> <div class="form-group"> <label>favorite number</label> <select class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> <!-- how many pizzas --> <div class="form-group"> <label>how many pizzas</label> <div class="form-control"> <label class="radio-inline"> <input type="radio" name="pizzas" value="male">1</label> <label class="radio-inline"> <input type="radio" name="pizzas" value="female">2</label> <label class="radio-inline"> <input type="radio" name="pizzas" value="female">3</label> </div> </div> <!-- did hear --> <div class="form-group"> <label>where did hear us</label> <div class="form-control"> <label> <input type="radio" name="referral" value="male">the internet</label> <label> <input type="radio" name="referral" value="female">from friend</label> <label> <input type="radio" name="referral" value="female">other</label> </div> </div> <!-- send me updates --> <div class="form-group"> <div class="checkbox"> <input type="checkbox">send me updates</div> </div> <!-- submit --> <div class="form-group"> <button type="submit" class="btn">submit</button> </div> </form>