之前和之后的 HTML 文本（前缀/后缀）输入字段答案

【问题标题】：HTML Text before and after (Prefix/Suffix) Input field之前和之后的 HTML 文本（前缀/后缀）输入字段
【发布时间】：2017-12-06 18:02:26
【问题描述】：

我需要在同一行的输入字段之前和之后显示 HTML 文本。前缀和后缀是在运行时添加的，可能存在也可能不存在。我已经尝试过和那里的组合。这是我现在拥有的：

这是我想要实现的（记住有时值不存在，所以我希望文本输入在它们不存在时恢复该空间：

这是我当前的代码（我确实删掉了一些类定义以使其更具可读性）：

<div>
    <div>Prefix and Suffix</div>
    <div class="row">
        <span style="display:inline-block">Test<input type="text" class="input">Dollars</span>
    </div>
</div>

我更喜欢不使用表格（仅 div）的解决方案，但如果这是唯一的方法，那就这样吧。

【问题讨论】：

将 html 粘贴到 JSBin 和 JSFiddle 中都给出了你所追求的......我猜我们没有看到导致这种行为的一些 css/样式？如果我将输入的宽度设置为 100%，它看起来就像你现在所拥有的。如果我只是删除宽度样式，它看起来就像你想要的。
谢谢，我确实删除了一些样式以使代码更清晰。我会看看那个...

标签： html input

【解决方案1】：

使用 flex 对我来说似乎工作得很好。可能值得一试。

   <div style="display:flex;">
       <div>Test&nbsp;</div>
       <input type="text">
       <div>&nbsp;Dollars</div>
    </div>

【讨论】：

谢谢，我会试一试。删除一些样式会在同一行上得到所有内容，但我需要左边的前缀，右边的后缀，以及填充其余空间的输入。
完美解决方案！填写输入所需的空间。在缺少前缀或后缀时也可以使用。只需要添加“align-item:center”和一些边距。