在标签标签中的两个文本字段之间添加数据而不更改其位置

时间:2014-01-19 15:05:25

标签: javascript html css

当我点击按钮时,我想在标签标签中附加数据。标签标签位于2个文本字段之间。我离开了&右边浮动它们都留下标签标签的空间来加载数据。 问题是一旦数据被追加,右侧的文本字段就会移动到下一行。如何避免这种情况并加载数据以保持文本字段的位置不变?我知道这是孩子的东西 :(

这是代码的一部分:

HTML:

<div id="container">
    <div id="leftnav"><input type="text" id="num1"></div>
    <label id="Opr"></label>
    <div id="rightnav"><input type="text" id="num2"></div>
</div>

CSS:

#container
{
width: 100%;
}
#leftnav
{
float: left;
margin: auto auto auto 35%;
}
#rightnav
{
float: right;
margin: auto 35% auto auto;
}

1 个答案:

答案 0 :(得分:0)

您的容器ID和css容器ID拼写错误。你的标签之后有一个休息时间,在下面一行之后将打开你的输入框。如果您不希望在调整窗口大小或标签内的任何信息足以推动第二个输入框时,该容器中的任何内容都会移动,您还应该使容器成为固定宽度。

如果你不想摆脱你正确的导航div,那么修复你的边距 - 百分比让它们自由移动:

#container { width: 900px; margin: auto auto; } 
#leftnav { float: left;  margin:auto auto auto 35px; } 
#rightnav { float: right; margin:auto 35px auto auto; }

Fiddle