问题
I want my input field "title" to render directly below the radio buttons, but now it is too far to the left. I need the extra div because it is a dynamic form, but I want the grid view. How can I accomplish that?
<!DOCTYPE html>
<html>
<head>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css"
rel="stylesheet" type="text/css">
<style>
textarea {
height: 600px !important width: 500 px !important
}
.inline {display: inline-block;}
</style>
<title></title>
</head>
<body>
<form accept-charset="UTF-8" action=
"http://127.0.0.1:8080/_ah/upload/ahFkZXZ-bW9udGFvcHJvamVjdHIiCxIVX19CbG9iVXBsb2FkU2Vzc2lvbl9fGICAgICAgLwLDA"
class="ui form formular" enctype="multipart/form-data" id="formular"
method="post" name="formular">
<span class="ui two column grid"></span>
<div class="row">
<span class="ui two column grid"></span>
<div class="two wide column">
<span class="ui two column grid"></span>
<div class="field">
<span class=
"ui two column grid"><label>Category</label></span>
</div><span class="ui two column grid"></span>
</div>
<div class="column field">
<span class="ui two column grid"></span>
<div class="inline field" id="type_container">
<span class="ui two column grid"><input name="type" type=
"radio" value="s"> <label>A</label> <input name="type"
style="margin-left: 25px;" type="radio" value="k">
<label>B</label></span>
</div><span class="ui two column grid"></span>
</div>
</div>
<div class="maintext" id="category_contents" style="display: block;">
<span class="ui two column grid"></span>
<div class="row">
<span class="ui two column grid"></span>
<div class="two wide column inline">
<span class="ui two column grid"></span>
<div class="field">
<span class=
"ui two column grid"><label>Title</label></span>
</div><span class="ui two column grid"></span>
</div>
<div class="column field inline">
<span class="ui two column grid"><input name="title"
placeholder="Title" type="text"></span>
</div><span class="ui two column grid"></span>
<div class="two wide column">
<span class="ui two column grid"></span>
<div class="field">
<span class=
"ui two column grid"><label>Text</label></span>
</div><span class="ui two column grid"></span>
</div>
<div class="column field">
<span class="ui two column grid"><input name="data"
placeholder="Test" type="text"></span>
</div><span class="ui two column grid"></span>
</div>
</div>
</form>
</body>
</html>I want to increase the space between the Title label and the Title input field. How can I do it?
回答1:
I had checked your HTML form it has some unwanted columns. Now I have updated the form and I created two demos and I used form elements and grid layout for two columns form.
Semantic-UI Basic Form:
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet"/>
<div class="example">
<h4 class="ui header">Semantic UI Form</h4>
<form class="ui form">
<div class="field">
<label>First Name</label>
<input type="text" name="first-name" placeholder="First Name">
</div>
<div class="field">
<label>Last Name</label>
<input type="text" name="last-name" placeholder="Last Name">
</div>
<div class="field">
<label>Categories</label>
</div>
<div class="field">
<div class="inline fields">
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="frequency" checked="checked">
<label>A</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="frequency">
<label>B</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="frequency">
<label>C</label>
</div>
</div>
</div>
</div>
<button class="ui button" type="submit">Submit</button>
</form>
</div>Semantic-UI Two Column Form:
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet"/>
<div class="ui text container">
<h4 class="ui header">Semantic UI Form</h4>
<form class="ui form">
<div class="ui grid">
<div class="four wide column ">
<label>First Name</label>
</div>
<div class="twelve wide column">
<input type="text" name="first-name" placeholder="First Name">
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
<label>Last Name</label>
</div>
<div class="twelve wide column">
<input type="text" name="first-name" placeholder="Last Name">
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
<div class="field">
<label>Categories</label>
</div>
</div>
<div class="twelve wide column">
<div class="inline fields">
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="frequency" checked="checked">
<label>A</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="frequency">
<label>B</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="frequency">
<label>C</label>
</div>
</div>
</div>
</div>
</div>
<button class="ui button" type="submit">Submit</button>
</form>
</div>回答2:
Try this with your label
<label style="padding-right:50px">Title</label>
Also you can use table in your design to make your page design more efficient.
回答3:
I recommend using Bootstrap - it will take you no more than 30 mins to understand and will make your website page/website layout so easy see - http://getbootstrap.com/
Also, means you website will be mobile and tablet friendly.
just add the files to your website -http://getbootstrap.com/getting-started/ (under first heading Bootstrap CDN).
then paste in the relevant form layout you would like (you can tweak these) - http://getbootstrap.com/css/#forms (under css heading)
see the grid layout system - http://getbootstrap.com/css/#grid
See all the things you can do just pasting in the bootstrap code: buttons, icons, etc (all listed under components - http://getbootstrap.com/components/
回答4:
Re my answer - have made your view using bootstrap as per my steps 1 - 4. Took me 7 mins, not even 10 :-) ..paste the below into an index file to test/see what it looks like.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">Category</label>
<div class="col-sm-6">
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
</div>
</div>
<div class="form-group">
<label for="inputTitle" class="col-sm-2 control-label">Title</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="inputTitle" placeholder="Title">
</div>
</div>
<div class="form-group">
<label for="inputText" class="col-sm-2 control-label">Text</label>
<div class="col-sm-6">
<textarea class="form-control" rows="3" placeholder="Text" id="inputText"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-6">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>
</div>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>
来源：https://stackoverflow.com/questions/38440246/how-to-align-my-label-and-input-field