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

Question

我希望我的输入字段 "title" 呈现在单选按钮的正下方，但现在它离左边太远了。我需要额外的 div 因为它是一个动态表单，但我想要网格视图。我怎样才能做到这一点？

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

我想增加标题标签和标题输入字段之间的 space。我该怎么做？

Answer 1

用你的 label

试试这个

<label style="padding-right:50px">Title</label>

您还可以在设计中使用table，让您的页面设计更有效率。

Answer 2

我推荐使用 Bootstrap - 不超过 30 分钟你就能理解，并且会让你的网站 page/website 布局很容易看 - http://getbootstrap.com/

此外，这意味着您的网站将适合移动设备和平板电脑使用。

只需将文件添加到您的网站 -http://getbootstrap.com/getting-started/（在第一个标题 Bootstrap CDN 下）。
然后粘贴您想要的相关表单布局（您可以调整这些）- http://getbootstrap.com/css/#forms（在 css 标题下）
查看网格布局系统 - http://getbootstrap.com/css/#grid
查看只需粘贴 bootstrap 代码即可执行的所有操作：按钮、图标等（全部列在组件下 - http://getbootstrap.com/components/

Answer 3

关于我的回答 - 根据我的步骤 1 - 4 使用 bootstrap 制作了你的观点。花了我 7 分钟，甚至不到 10 :-) ..将下面的内容粘贴到索引文件中到 test/see 它看起来像什么。

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

Answer 4

我检查了您的 HTML 表单，其中包含一些不需要的列。现在我已经更新了表单并创建了两个演示，并且我使用了表单元素和网格布局作为两列表单。

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

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

How to align my label and input field

html

css

semantic-ui