如何对齐我的标签和输入字段

时间：2016-07-18 15:11:01

标签： html css semantic-ui

我想要我的输入字段＆＃34; title＆＃34;直接在单选按钮下面渲染，但现在它离左边太远了。我需要额外的div，因为它是一个动态表单，但我想要网格视图。我怎么能做到这一点？

＆＃13;
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

我想增加Title标签和Title输入字段之间的空间。我该怎么办？

4 个答案:

答案 0 :(得分：3)

我检查了您的HTML表单，它有一些不需要的列。现在我已经更新了表单，我创建了两个演示，我使用了表格元素和网格布局两个列形式。

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双栏表格： 

<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>

答案 1 :(得分：0)

使用label

尝试此操作 
<label style="padding-right:50px">Title</label>

此外，您可以在设计中使用table来提高页面设计效率。

答案 2 :(得分：-1)

我建议使用Bootstrap - 您只需花费30分钟即可理解，并使您的网站页面/网站布局变得如此简单 - http://getbootstrap.com/

此外，意味着您的网站将是移动和平板电脑友好。

  1. 只需将文件添加到您的网站 - http://getbootstrap.com/getting-started/（在第一个标题Bootstrap CDN下）。

  2. 然后粘贴您想要的相关表单布局（您可以调整这些） - http://getbootstrap.com/css/#forms（在css标题下）

  3. 请参阅网格布局系统 - http://getbootstrap.com/css/#grid

  4. 查看您在引导代码中粘贴的所有内容：按钮，图标等（全部列在组件下 - http://getbootstrap.com/components/

答案 3 :(得分：-1)

我的回答 - 根据我的步骤1 - 4使用bootstrap创建了你的视图。花了我7分钟，甚至不是10 :-) ..将下面的内容写入索引文件以测试/看看它的样子。 

<!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>
相关问题
最新问题