标签离输入框太远

Question

the labels are too far away from the input boxes

this can be confusing for users to keep track of what they are filling in.

 <link href="http://www.qlbusiness.com/static/ui/semantic.min.css" rel="stylesheet"/> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <title>QL Business</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <div id="wrapper"> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="/">Customer Service</a> </div> <div id="navbar" class="navbar-collapse collapse"> <form class="navbar-form navbar-right" enctype="application/x-www-form-urlencoded" action="/account/do_login" method="post"> <div class="form-group"> <input type="text" name="email" placeholder="Email" class="form-control"> </div> <div class="form-group"> <input type="password" name="password" placeholder="Password" class="form-control"> </div> <button type="submit" class="btn btn-success">Sign in</button> </form> </div> <!--/.navbar-collapse --> </div> </nav> <!-- Main jumbotron for a primary marketing message or call to action --> <div class="jumbotron"> <div class="container" style="margin-top:20px; width: 75%"> <div class="ui ignored positive icon message"> <i class="edit icon"></i> <div class="content"> <h3 class="header">Insert Ad</h3> Your ad will be reviewed according to the rules of our site. After approval, it will be published for a period of 60 days. Thanks for using our site! </div> </div> <form method="post" action="http://www.qlbusiness.com/_ah/upload/AMmfu6ZHOY_ie_HHe69JmSQgOA3W9L3ezf92_z1ZYXubImy_QrcYi0L5bfiv1-nW8nUhxRQBFmdmXkJSEewM0vnauBJ0HjaTJja_s_8KTeg15_fFX8quBGGV91TIBYIK5jtfOe-GXx7E/ALBNUaYAAAAAV3gEGGfIbS9adBDsyVar3DnoppdYi7eu/" name="formular" class="ui form" accept-charset="UTF-8" enctype="multipart/form-data"> <div class="inline fields"> <div class="required two wide field"> <label>Name</label> </div> <div class="five wide field"> <input size="35" type="text" name="name" placeholder="Name"> </div> </div> <div class="inline fields"> <div class="required two wide field"> <label>Email</label> </div> <div class="five wide field"> <input size="35" type="text" name="email" placeholder="Email"> </div> </div> <div class="inline fields"> <div class="two wide field"> <label>Phone</label> </div> <div class="five wide field"> <input type="text" placeholder="Phone number"> <div class="ui checkbox"> <input id="example-id" type="checkbox" checked> <label for="example-id">View phone number on site</label> </div> </div> </div> <div class="inline fields"> <div class="required two wide field"> <label>Category</label> </div> <div class="five wide field"> <select class="ui dropdown" name="category_group"> <option value="0">«All categories»</option> <option value="1000" style="background-color: rgb(220, 220, 195); font-weight: bold;" disabled="disabled" id="cat1000"> -- Real estate -- </option> <option value="1020" id="cat1020"> Houses </option> <option value="1010" id="cat1010"> Apartments </option> <option value="1030" id="cat1030"> Vacation homes </option> <option value="1050" id="cat1050"> Offices </option> <option value="1080" id="cat1080"> Land </option> <option value="1100" id="cat1100"> Flatmates/Paying Guest </option> <option value="1090" id="cat1090"> Other </option> <option value="2000" style="background-color: rgb(220, 220, 195); font-weight: bold;" disabled="disabled" id="cat2000"> -- Vehicles -- </option> <option value="2010" id="cat2010"> Cars </option> <option value="2030" id="cat2030"> Motorcycles </option> <option value="2040" id="cat2040"> Accessories &amp; parts </option> <option value="2080" id="cat2080"> Trucks </option> <option value="2070" id="cat2070"> Other vehicles </option> <option value="3000" style="background-color: rgb(220, 220, 195); font-weight: bold;" disabled="disabled" id="cat3000"> -- Home &amp; Personal items -- </option> <option value="3040" id="cat3040"> Home &amp; Garden </option> <option value="3050" id="cat3050"> Clothing </option> <option value="3030" id="cat3030"> For Kids (Toys &amp; Clothes) </option> <option value="3060" id="cat3060"> Jewelry &amp; Watches </option> <option value="4000" style="background-color: rgb(220, 220, 195); font-weight: bold;" disabled="disabled" id="cat4000"> -- Leisure, Sports &amp; hobby -- </option> <option value="4010" id="cat4010"> Hobbies </option> <option value="4020" id="cat4020"> Sports &amp; Bicycles </option> <option value="4040" id="cat4040"> Movies, Books &amp; Magazines </option> <option value="4030" id="cat4030"> Pets </option> <option value="4090" id="cat4090"> Tickets </option> <option value="4060" id="cat4060"> Art &amp; Collectibles </option> <option value="4070" id="cat4070"> Music &amp; Instruments </option> <option value="5000" style="background-color: rgb(220, 220, 195); font-weight: bold;" disabled="disabled" id="cat5000"> -- Electronics -- </option> <option value="5030" id="cat5030"> Computers &amp; Accessories </option> <option value="5020" id="cat5020"> TV, Audio, Video, Cameras </option> <option value="5010" id="cat5010"> Cellphones &amp; gadgets </option> <option value="5040" id="cat5040"> Video games &amp; consoles </option> <option value="6000" style="background-color: rgb(220, 220, 195); font-weight: bold;" disabled="disabled" id="cat6000"> -- Jobs &amp; Services -- </option> <option value="6010" id="cat6010"> Job offers </option> <option value="6020" id="cat6020"> Resumes </option> <option value="6030" id="cat6030"> Services </option> <option value="6040" id="cat6040"> Classes </option> <option value="6090" id="cat6090"> Professional/Office equipment </option> <option value="7000" style="background-color: rgb(220, 220, 195); font-weight: bold;" disabled="disabled" id="cat7000"> -- -- </option> <option value="7010" id="cat7010"> Other </option> </select> </div> </div> <div class="inline fields"> <div class="two wide required field"> <label>State</label> </div> <div class="five wide field"> <select class="ui dropdown" onchange="cities(this);document.getElementById('area').display='';" name="region" id="region"> <option value="">«Choose state»</option> <option value="7089183"> Alabama </option> <option value="7091183"> Alaska </option> <option value="7088186"> Arizona </option> <option value="7102183"> Arkansas </option> <option value="7095185"> California </option> <option value="7094186"> Colorado </option> <option value="7097187"> Connecticut </option> <option value="7088187"> Delaware </option> <option value="7101184"> Florida </option> <option value="7090186"> Georgia </option> <option value="7095186"> Hawaii </option> <option value="7095187"> Idaho </option> <option value="7101185"> Illinois </option> <option value="7090187"> Indiana </option> <option value="7102184"> Iowa </option> <option value="7092184"> Kansas </option> <option value="7098186"> Kentucky </option> <option value="7100184"> Louisiana </option> <option value="7091184"> Maine </option> <option value="7089185"> Maryland </option> <option value="7096187"> Massachusetts </option> <option value="7096188"> Michigan </option> <option value="7098188"> Minnesota </option> <option value="7102185"> Mississippi </option> <option value="7094187"> Missouri </option> <option value="7093186"> Montana </option> <option value="7091185"> Nebraska </option> <option value="7102186"> Nevada </option> <option value="7093187"> New Hampshire </option> <option value="7090188"> New Jersey </option> <option value="7094188"> New Mexico </option> <!-- <option value="7099184">--> <option value="6370570371334144"> New York </option> <option value="7101186"> North Carolina </option> <option value="7092185"> North Dakota </option> <option value="7098189"> Ohio </option> <option value="7091186"> Oklahoma </option> <option value="7097188"> Oregon </option> <option value="7088189"> Pennsylvania </option> <option value="7098190"> Rhode Island </option> <option value="7093188"> South Carolina </option> <option value="7094189"> South Dakota </option> <option value="7097189"> Tennessee </option> <option value="7101187"> Texas </option> <option value="7090189"> Utah </option> <option value="7088190"> Vermont </option> <option value="7097190"> Virginia </option> <option value="7099185"> Washington </option> <option value="7091187"> West Virginia </option> <option value="7098191"> Wisconsin </option> <option value="7101188"> Wyoming </option> </select> </div> </div> <div class="inline fields"> <div class="two required wide field"> <label>City</label> </div> <div id="cities" class="five wide field"> <select class="ui dropdown" onchange="cities(this);document.getElementById('area').display='';" name="region" id="region"> <option value="">«Choose city»</option> </select> </div> </div> <div class="required inline field"> <div class="fields"><label class="two wide field">Type</label> <div class="inline field"> <input type="radio" name="type" checked="checked"> <label>For sale</label> </div> <div class="inline field"> <input type="radio" name="type"> <label>Want to buy</label> </div> </div> </div> <div class="inline fields"> <div class="required two wide field"> <label>Title</label> </div> <div class="five wide field"> <input size="55" type="text" name="title" placeholder="Title"> </div> </div> <div class="inline fields"> <div class="required two wide field"> <label>Text</label> </div> <div class="five wide field"> <textarea name="text"></textarea> </div> </div> <div class="inline fields"> <div class="required two wide field"> <label>Price</label> </div> <div class="five wide field"> <div class="ui right labeled input"> <div class="ui label"> $</div> <input type="text" placeholder="Amount"> <div class="ui basic label"> .00 </div> </div> </div> </div> <div class="inline field"> <label class="two wide field">Image</label> <input name="image1" size="35" id="image1" type="file"> </div> <div class="inline field"> <label class="two wide field">Image</label> <input name="image2a" size="35" id="image2a" type="file"> </div> <div class="inline field"> <label class="two wide field">Image</label> <input name="image3" size="35" id="image3" type="file"> </div> <div class="inline field"> <label class="two wide field">Image</label> <input name="image4" size="35" id="image4" type="file"> </div> <div class="inline field"> <label class="two wide field">Image</label> <input name="image5" size="35" id="image5" type="file"> </div> <div class="required field"> <div class="ui checkbox"> <input id="terms" type="checkbox" checked> <label for="terms">I agree to the Terms and Conditions</label> </div> </div> <div class="inline field"> <label class="two wide field"></label> <div class="ui progress blue seven wide field"> <div class="bar"></div> <div class="percent">0%</div> </div> <div id="status"></div> </div> <br> <div class="ui field"> <input type="submit" value="Submit" class="ui button"/> </div> <div class="ui error message"></div> </form> <footer> <p>&copy; 2016 QL Business, Inc.</p> <a href="https://www.facebook.com/koolbusiness" target="_blank"> <button class="ui circular facebook button"> <i class="facebook icon"></i> Facebook </button></a> <!-- <button class="ui twitter button"> <i class="twitter icon"></i> Twitter </button>--> <a href="https://plus.google.com/b/101588786083596465725/101588786083596465725" target="_blank"> <button class="ui circular google plus button"> <i class="google plus icon"></i> Google Plus </button> </a> </footer> </div> </div> <hr> </div> 

How can I decrease the distance between the labels and the input boxes?

Answer 1

Change

<div class="required two wide field">

To

<div class="required two narrow field">