Question

注意： 上面的标记是由JavaServer Faces自动生成的。我有以下标记：

<span style="display: block;">
    <input checked="checked" type="checkbox">ID 
        <select  size="1" >	
            <option value="">Select</option>
            <option value="EQUAL" selected="selected">=</option>
        </select>
        <table style="display: inline-table;">
            <tbody>
                 <tr>
                     <td>
                           <input name="cr" value="" type="text">
                     </td>
                 </tr>
            </tbody>
     </table>
</span>

JSFiddle

正如我们从该演示中看到的那样，输入不是连续放置的。

enter image description here

如何将它们放在一行中，如下所示：

enter image description here

Answer 1

已经有两种解决方案，但如果你不想改变你的HTML代码，那么你可以使用一些简单的css规则来实现它。跟随小提琴 https://jsfiddle.net/nileshmahaja/5ajmkery/7/

<强> CSS

span *{
    display:block;
    float:left;
    margin-right:5px
}
table{
    padding:0;
    margin-left:20px;
    border-collapse:collapse
}

Answer 2

你必须在输入???中使用表格标签，否则你可以使用

<div>
 <input checked="checked" type="checkbox" style="float:left" />
 <label  style="float:left">ID </label>
 <select  size="1"  style="float:left" > 
  <option value="" >Select</option>
  <option value="EQUAL" selected="selected">=</option>
 </select>
 <input name="cr" value="" type="text"  style="float:left">
</div>

我希望此解决方案可以帮助您

Answer 3

我不确定限制，但你可以在表格中添加显示和边距样式。这有点儿hacky ..

<table style="display: inline-block;margin-bottom: -9px;">
        <tbody>
             <tr>
                 <td>
                       <input name="createRecipientDynamicGroupForm:j_idt240:8:j_idt253" value="" type="text">
                 </td>
             </tr>
        </tbody>
 </table>

Answer 4

你可以试试这个：

    <table style="display: inline-table;">
        <tbody>
             <tr>
                 <td>
                     <input checked="checked" type="checkbox">ID 
                 </td>
                 <td>
                    <select  size="1" > <option value="">Select</option>
                      <option value="EQUAL" selected="selected">=</option>
                    </select>                         
                  </td>    
                 <td>
                       <input name="createRecipientDynamicGroupForm:j_idt240:8:j_idt253" value="" type="text">
                 </td>
             </tr>
        </tbody>
 </table>

基本上我已经移动了表格中的前两个元素。

将输入放在一行中

4 个答案: