Question

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

＆＃13;

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

＆＃13;

Answer 1

在div上使用mysql_library_init()

display: inline-block;

我使用内联类向您显示第一个文本输入

Answer 2

向包含textrow的2个row添加了一个班级input type="text" 并在其上使用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可以将它们排在同一行，您可以在课程.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;
 }

如何使字段对齐？

3 个答案: