如何对齐我的标签和输入字段 [英] How to align my label and input field
本文介绍了如何对齐我的标签和输入字段的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我希望输入字段标题"直接在单选按钮下方呈现，但是现在它离左侧太远了.我需要额外的 div ，因为它是动态表单，但是我想要网格视图.我该怎么办?
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?
推荐答案
我检查了您的HTML表单，其中包含一些不需要的列.现在，我更新了表单，并创建了两个演示，并为两列表单使用了表单元素和网格布局.
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.
语义UI基本表单:
<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>语义UI两列表格:
<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>这篇关于如何对齐我的标签和输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
