我怎么能挤进现有盒子左边的小盒子？

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

您是否尝试过使用＆＃39; Col-Md-X＆＃39;您的<td>代码中的课程？

与百分比类似，您可以将空间划分为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>

Answer 2

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

<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