标签离输入框太远
这可能会使用户难以跟踪他们正在填写的内容。
<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 & 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 & Personal items --
</option>
<option value="3040" id="cat3040">
Home & Garden
</option>
<option value="3050" id="cat3050">
Clothing
</option>
<option value="3030" id="cat3030">
For Kids (Toys & Clothes)
</option>
<option value="3060" id="cat3060">
Jewelry & Watches
</option>
<option value="4000" style="background-color: rgb(220, 220, 195); font-weight: bold;"
disabled="disabled"
id="cat4000">
-- Leisure, Sports & hobby --
</option>
<option value="4010" id="cat4010">
Hobbies
</option>
<option value="4020" id="cat4020">
Sports & Bicycles
</option>
<option value="4040" id="cat4040">
Movies, Books & Magazines
</option>
<option value="4030" id="cat4030">
Pets
</option>
<option value="4090" id="cat4090">
Tickets
</option>
<option value="4060" id="cat4060">
Art & Collectibles
</option>
<option value="4070" id="cat4070">
Music & 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 & Accessories
</option>
<option value="5020" id="cat5020">
TV, Audio, Video, Cameras
</option>
<option value="5010" id="cat5010">
Cellphones & gadgets
</option>
<option value="5040" id="cat5040">
Video games & consoles
</option>
<option value="6000" style="background-color: rgb(220, 220, 195); font-weight: bold;"
disabled="disabled"
id="cat6000">
-- Jobs & 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>© 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>如何减小标签和输入框之间的距离？
最佳答案
改变
<div class="required two wide field">
到
<div class="required two narrow field">
关于javascript - 标签离输入框太远，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38163072/