如何使字段对齐？

Question

如何对齐标题和文本输入字段，使它们与标签位于同一行？我需要额外的 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>

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

我使用了 class 内联来显示你的第一个文本输入

Answer 2

在包含 input type="text" 的 2 row 中添加了 class 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>

Answer 3

Float:left 可以将它们对齐在同一行，您可以在 class .row 上执行此操作，或者将其他 class 分配给它并分配 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;
 }

如何使字段对齐？

How can I make the fields aligned?

html

css

semantic-ui