Html 我怎样才能挤进现有盒子左边的一个小盒子？

这就是我目前拥有的：

这就是我所希望的：

我试过桌子和宽度百分比，但就是做不好。例如，这就是我在尝试时得到的结果：

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

“+1”并没有并排出现，而是推到了它的顶部

---

感谢您的帮助/指点。

如果您想使用table实现它，可以执行以下操作：

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

+1//将其设置为20%
//60%
//20%

或者根据您想要实现的外观，使用div和元素的positionig 比如：

+1//将宽度设置为20%
//将宽度设置为60%
//居中输入并使divs向左浮动

如果您想使用table实现它，可以执行以下操作：

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

+1//将其设置为20%
//60%
//20%

或者根据您想要实现的外观，使用div和元素的positionig 比如：

+1//将宽度设置为20%
//将宽度设置为60%
//居中输入并使divs向左浮动

您是否尝试在

标记中使用“Col-Md-X”类

与百分比类似，您可以将空间划分为12个部分。 将cl1和cl2类替换为

class=“col-md-3”

和

class=“col-md-9”

将使前缀部分为空格的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>

+1
(+01 123 4567890)

您是否尝试在

标记中使用“Col-Md-X”类

与百分比类似，您可以将空间划分为12个部分。 将cl1和cl2类替换为

class=“col-md-3”

和

class=“col-md-9”

将使前缀部分为空格的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>

+1
(+01 123 4567890)

谢谢你的回答James，很遗憾我不能使用bootstrap，我们的页面上有很多CSS样式，bootstrap库把一切都搞糟了：/you知道没有bootstrap的方法吗？谢谢你的回答James，很遗憾我不能使用bootstrap，我们在页面上有很多CSS样式，而引导库把一切都搞砸了：/你知道没有引导的方法吗？