在同一行的 <input> 旁边显示 $ 符号答案

【问题标题】：Display a $ sign beside the <input> on the same line在同一行的 <input> 旁边显示 $ 符号
【发布时间】：2021-01-17 01:34:04
【问题描述】：

我的 asp.net 核心 MVC 视图中有以下内容：-

<td>
   $<input asp-for="g0" type="text" class="form-control tablecellcustom" disabled>
</td>

我试图在同一行的<input> 旁边显示$ 符号，但目前，我上面的代码将在单独的行上显示$，如下所示：-

关于如何在同一行显示它们的任何建议？

【问题讨论】：

标签： html css asp.net-core-mvc

【解决方案1】：

我的猜测是form-control 具有display:block; 和width:100% 的风格

删除上述样式或使用下面的自定义 css 覆盖它

.form-control.tablecellcustom {
 display: inline;
 width: auto;
}

我认为您的代码在内部使用了 Bootsrap。这是一个猜测，可能是错误的。如果它在内部使用 Bootstrap，您也可以尝试使用输入组。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="input-group mb-3">
  <span class="input-group-text">$</span>
  <input asp-for="g0" type="text" value="100000" class="form-control tablecellcustom" disabled>
</div>

【讨论】：

【解决方案2】：

我怀疑您的输入是显示块，因此您需要为您的输入提供一个包装器并使用弹性框来实现这一点。

.form-control-wrapper {
  display: flex;
  align-items: center;
}

.form-control {
  margin-left: 5px;
}

<div class='form-control-wrapper'>
  $ <input class='form-control' />
</div>

【讨论】：

输入是一个空标签。它没有结束标签，结尾也不需要斜杠。
我在用 XHTML 写作 ;)

【解决方案3】：

您发布的代码可以正常工作。好像您没有发布应用的 CSS。

无论如何，请确保input 元素有display: inline 或inline-block 出现在一行中，并在其前面带有“$”符号。

【讨论】：

【解决方案4】：

您可以将值放入输入值中。您可以在值中设置一个变量，也可以在放置之前将字符串与 $ 连接起来您还可以为该输入设置标签，然后在 CSS 中将其设置为同一行

<td>
   <input value={} asp-for="g0" type="text" class="form-control tablecellcustom" disabled>
</td>

【讨论】：

然后你可以在 value={} 中设置你的变量。此外，您可以将字符串与 $ 连接，这样您就可以获得数字 + $。