Javascript 有一个自动调整按钮&；无论文本长度如何，都保持在文本旁边

如何让按钮自动调整并保持在单词旁边，而不考虑其长度？我处理的是用户名

例如，如果我在用户名旁边有一个按钮，长度为

greg

：

格雷格按钮|

如果用户要使用长度为的用户名注册，我想让该按钮自动调整，例如：

威廉森按钮|

山姆按钮|

威廉森·萨姆·巴顿|

---

我怎样才能做到这一点？谢谢。

由于没有提供任何片段，我尝试复制该场景。希望这段代码有用

HTML

<input type= "text" id = "text">
<button id = "demoButton">Click</button>

<div>
<div id = "mySpan"></div>
<button type="button">DEMO BUTTON</button>
</div> 

CSS

css部分将是您感兴趣的部分

这是一个演示演示

p{
浮动：左；
保证金：0.5px
}
钮扣{
浮动：左；
}

威廉姆森点击这里

---

Bob

单击此处在css中使用float:left并使用绝对位置，显示内联块将按钮的样式设置为显示：内联块，如果名称和按钮都是内联的，则无需浮动任何内容。“想让该按钮自动调整”调整到什么？要填充特定的容器宽度？你能在问题中包括

html

，

css

吗？寻求代码帮助的问题必须包括在问题本身中重现代码所需的最短代码，最好是以最短的格式。看见

var _getDemoButton = document.getElementById("demoButton");
_getDemoButton.addEventListener('click',function(){
document.getElementById("mySpan").innerHTML = document.getElementById("text").value
})

#mySpan{
display:inline-block;
width:auto;
border:1px solid red;
}