如何使字段对齐？答案

【问题标题】：How can I make the fields aligned?如何使字段对齐？
【发布时间】：2016-07-18 22:54:57
【问题描述】：

如何对齐输入字段标题和文本，使它们与标签位于同一行？我需要额外的div，因为我正在制作一个需要动态字段的表单。我的问题是无论我做什么输入框都会出现在下一行。

<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
    }
  </style>

</head>

<body>

  <form method="post" action="http://127.0.0.1:8080/_ah/upload/ahFkZXZ-bW9udGFvcHJvamVjdHIiCxIVX19CbG9iVXBsb2FkU2Vzc2lvbl9fGICAgICAgLwLDA" name="formular" class="ui form formular" accept-charset="UTF-8" enctype="multipart/form-data">

    <span class="ui two column grid">

        <div class="row">
            <div class="two wide column">

                <div class="field">
                    <label>Category</label>

                </div>

            </div>
            <div class="column field">

                <div class="inline field" id="type_container">
                    <input type="radio" name="type" value="s">
                    <label>A</label>
                    <input type="radio" style="margin-left: 25px;" name="type" value="k">
                    <label>B</label>
                </div>

            </div>
        </div>

       <div style="display: block;" id="category_contents" class="maintext">

<div class="row">
            <div class="two wide column">

                <div class="field">
                    <label>Title</label>

                </div>

            </div>
            <div class="column field">
                <input type="text" name="title" placeholder="Title">

            </div>

              </div>  <div class="row">        
  
<div class="two wide column">

                <div class="field">
                    
                  <label>Text</label>

                </div>

            </div>
            <div class="column field">
                <input type="text" name="data" placeholder="Test">

            </div>

  </div>
</div>

</body>
</html>

【问题讨论】：

你不能用一张桌子吗？
@PClegg 但是最好不要使用表格进行布局。我可以解决这个问题，也可以通过制作 div 网格而不是表格来垂直对齐它。

标签： html css semantic-ui

【解决方案1】：

在您的 div 上使用 display: inline-block;

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

</head>

<body>

  <form method="post" action="http://127.0.0.1:8080/_ah/upload/ahFkZXZ-bW9udGFvcHJvamVjdHIiCxIVX19CbG9iVXBsb2FkU2Vzc2lvbl9fGICAgICAgLwLDA" name="formular" class="ui form formular" accept-charset="UTF-8" enctype="multipart/form-data">

    <span class="ui two column grid">

        <div class="row">
            <div class="two wide column">

                <div class="field">
                    <label>Category</label>

                </div>

            </div>
            <div class="column field">

                <div class="inline field" id="type_container">
                    <input type="radio" name="type" value="s">
                    <label>A</label>
                    <input type="radio" style="margin-left: 25px;" name="type" value="k">
                    <label>B</label>
                </div>

            </div>
        </div>

       <div style="display: block;" id="category_contents" class="maintext">

<div class="row">
            <div class="two wide column inline">

                <div class="field">
                    <label>Title</label>

                </div>

            </div>
            <div class="column field inline">
                <input type="text" name="title" placeholder="Title">

            </div>

<div class="two wide column">

                <div class="field">
                    <label>Text</label>

                </div>

            </div>
            <div class="column field">
                <input type="text" name="data" placeholder="Test">

            </div>

  </div>
</div>

</body>
</html>

我使用内联类在您的第一个文本输入中向您展示

【讨论】：

【解决方案2】：

向包含input type="text" 的2 个rows 添加了一个类textrow 并在他们身上使用display:inline-block

<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
    }
    .textrow {
      display:inline-block;
    }
  </style>

</head>

<body>

  <form method="post" action="http://127.0.0.1:8080/_ah/upload/ahFkZXZ-bW9udGFvcHJvamVjdHIiCxIVX19CbG9iVXBsb2FkU2Vzc2lvbl9fGICAgICAgLwLDA" name="formular" class="ui form formular" accept-charset="UTF-8" enctype="multipart/form-data">

    <span class="ui two column grid">

        <div class="row">
            <div class="two wide column">

                <div class="field">
                    <label>Category</label>

                </div>

            </div>
            <div class="column field">

                <div class="inline field" id="type_container">
                    <input type="radio" name="type" value="s">
                    <label>A</label>
                    <input type="radio" style="margin-left: 25px;" name="type" value="k">
                    <label>B</label>
                </div>

            </div>
        </div>

       <div style="display: block;" id="category_contents" class="maintext">

<div class="row textrow">
            <div class="two wide column">

                <div class="field">
                    <label>Title</label>

                </div>

            </div>
            <div class="column field">
                <input type="text" name="title" placeholder="Title">

            </div>

              </div>  
<div class="row textrow">        
  
<div class="two wide column">

                <div class="field">
                    
                  <label>Text</label>

                </div>

            </div>
            <div class="column field">
                <input type="text" name="data" placeholder="Test">

            </div>

  </div>
</div>

</body>
</html>

【讨论】：

【解决方案3】：

Float:left 可以将它们对齐在同一行，您可以在 .row 类上执行此操作，也可以将其他类分配到其中并分配 float:left;

<div class="row">

........

</div>  

Css 

.row{
   float:left;
   padding-right:5px;
 }   

(or)

<div class="row txt">

    ........

</div>  

Css 

.txt{
   float:left;
   padding-right:5px;
 }

【讨论】：