引导输入和跨度在同一行的td内

Question

我在同一行显示输入和跨度时遇到问题。它们位于表格的第一个单元格内。

我已经尝试过使用form-inline类，但这两个元素仍然显示在不同的行中。

我做错了什么？

Code example from code pen.

来源：

<table id="tblJEEVUG" class="table table-hover table-bordered table-striped table-condensed">
    <thead>
      <tr>
        <th>Datum</th>
        <th>Št. oseb</th>
        <th>Opomba</th>
        <th>Skupina</th>
        <th></th>
      </tr>
    </thead>
    <tbody>

            <tr data-ievug_key="170000536">



              <td id="devug_dst" style="width:200px;"><input class="form-control datetimepicker form-inline bounddtp" value="" style="width:70%;">
                <span id="spanOK" class="glyphicon glyphicon-ok form-inline" style="color: green; font-weight: bold; font-size: 20px; width: 5%;"></span></td>
              <td id="ievug_nop" style="width:50px;"><input class="form-control cbeh-number"></td>
              <td id="cevug_nto"><input class="form-control" value="zdaj pa en komnetar tule notri zapišem jaz"></td>
              <td id="igrop_key">

                <select class="form-control" data-editable="1">
                  <option></option>
                      <option value="100000030">Oddelek za transport</option>
                      <option value="100000029">Catering strežba</option>
                      <option value="100000504" selected="">Catering vodje prireditve</option>
                      <option value="100000748">HKJ-odgovorni kuharji </option>
                      <option value="100000028">HKJ-kuharji </option>

                </select>

              </td>
              <td style="vertical-align:middle;text-align:center;">
                <span class="glyphicon glyphicon-remove" title="Izbriši" style="color:red;cursor:pointer;display:block;" onclick="PopUpJEEVUS.RemoveRowJEEVUG(this);"></span>
              </td>

            </tr>
            <tr data-ievug_key="170000537">



              <td id="devug_dst" style="width:200px;"><input class="form-control datetimepicker form-inline bounddtp" value="15.11.2017 10:30" style="width:70%;">
                <span id="spanOK" class="glyphicon glyphicon-ok form-inline" style="color: green; font-weight: bold; font-size: 20px; width: 25%;"></span></td>
              <td id="ievug_nop" style="width:50px;"><input class="form-control cbeh-number" value="44"></td>
              <td id="cevug_nto"><input class="form-control" value="transtport pa bom dal en manjši komentar za tale transport sedaj"></td>
              <td id="igrop_key">

                <select class="form-control" data-editable="1">
                  <option></option>
                      <option value="100000030" selected="">Oddelek za transport</option>
                      <option value="100000029">Catering strežba</option>
                      <option value="100000504">Catering vodje prireditve</option>
                      <option value="100000748">HKJ-odgovorni kuharji </option>
                      <option value="100000028">HKJ-kuharji </option>

                </select>

              </td>
              <td style="vertical-align:middle;text-align:center;">
                <span class="glyphicon glyphicon-remove" title="Izbriši" style="color:red;cursor:pointer;display:block;" onclick="PopUpJEEVUS.RemoveRowJEEVUG(this);"></span>
              </td>

            </tr>
            <tr data-ievug_key="170000535">



              <td id="devug_dst" style="width:200px;"><input class="form-control datetimepicker form-inline bounddtp" value="16.11.2017 10:30" style="width:70%;">
                <span id="spanOK" class="glyphicon glyphicon-ok form-inline" style="color: green; font-weight: bold; font-size: 20px; width: 25%;"></span></td>
              <td id="ievug_nop" style="width:50px;"><input class="form-control cbeh-number" value="44"></td>
              <td id="cevug_nto"><input class="form-control" value="fffffffffffffffffffff"></td>
              <td id="igrop_key">

                <select class="form-control" data-editable="1">
                  <option></option>
                      <option value="100000030">Oddelek za transport</option>
                      <option value="100000029" selected="">Catering strežba</option>
                      <option value="100000504">Catering vodje prireditve</option>
                      <option value="100000748">HKJ-odgovorni kuharji </option>
                      <option value="100000028">HKJ-kuharji </option>

                </select>

              </td>
              <td style="vertical-align:middle;text-align:center;">
                <span class="glyphicon glyphicon-remove" title="Izbriši" style="color:red;cursor:pointer;display:block;" onclick="PopUpJEEVUS.RemoveRowJEEVUG(this);"></span>
              </td>

            </tr>



    </tbody>
  </table>

Answer 1

您必须将float: left;放在输入文本框中 检查here我的示例

Answer 2

只需将float:left添加到表单控件类和margin-right即可使其看起来很好。 https://codepen.io/lionelchris/pen/dZVqoO

Answer 3

将display: inline-block css放在表单控件中，如果使用的是Bootstrap4，则可以在输入中放置.d-inline-block类。

这将正确运行您的代码。