我怎么能挤在一个现有的盒子左边的一个较小的表单框？

Question

这是我目前：

这就是我希望的：

我想表和宽度百分比，但我不能让对的。例如。这是我结束了，当我尝试这样做：相反的是一边到另一边

<table class="toptable"> 
<tr><td class="cl1">+1</td> 
    <td class="cl2"> 
     <div class="field"><input id="email_phone" class="text" type="text" name="email_phone" maxlength="128" placeholder="phone number or email" tabindex="1"> 
      <span class="form_label">(+01 123 4567890)</span> 
     </div> 
    </td> 
</tr> 
</table> 

```

.cl1{ 
    width:20%; 
    display:inline; 
    } 

    .cl2{ 
    width:80%; 
    display:inline; 
    } 

    .toptable { 
    padding:5px; 
    width:200px; 
    } 

的 '+1' 猛推顶端它..

欣赏任何帮助/指针。

Answer 1

如果你想使用的表，你可以做这样的事情来实现它：

<tr> 
    <td> <span>+1</span> </td> //set it like 20% 
    <td> <input ...> </td> //60% 
    <td></td> //20% 
</tr> 

或使用DIV和使用取决于看你想要达到 类元件positionig：

<div><span>+1</span></div> //set width to 20% 
<div><input ...></div> // set width to 60% 
         //center input nad make divs to float left 

Answer 2

您是否尝试过在您的<td>标签中使用'Col-Md-X'类？

与百分比类似，您可以将空间分成12个部分。 用class="col-md-3"和class="col-md-9"替换你的cl1和cl2类将会给你的前缀部分的1/4空间，数字部分剩余的3/4空间。 您也可以更改col-md中的数字以不同方式划分您的表格行。

 <table class="toptable"> 
     <tr> 
      <td class="col-md-3">+1</td> 
      <td class="col-md-9"> 
       <div class="field"> 
        <input id="email_phone" class="text" type="text" name="email_phone" maxlength="128" placeholder="phone number or email" tabindex="1"> 
        <span class="form_label">(+01 123 4567890)</span> 
       </div> 
      </td> 
     </tr> 
    </table>