如何让错误消息显示在输入按钮的右侧？

Question

我会尽量用图片来解释这个。

这是我的输入按钮（看"bet"下的那个）：

我希望错误信息出现在这里：

然而，我所有的尝试最终都是这样的：

我该怎么做？我尝试了多种方法，例如 span、inline display 等

更新：

在 github.

上发布了完整的前端代码

CSS: https://gist.github.com/xxFlare/41ed6a1cac81bbda48848d55a716c3dd

HTML: https://gist.github.com/xxFlare/300733b8b848aea829fc6b26ac70eda2

Answer 1

根据评论进行编辑，完整片段：

这是每个错误按钮上的绝对位置和坐标，带有单独的 class，根据您的利益调整它们，请注意按钮填充和边距可能会将它们推出宽度较小的视口中的容器。这将使您的输入保持居中，否则我可以修改您的 html 以使其内联，但会将输入推到左侧，因此标签需要手动对齐。

/*Smooth font*/

@font-face {
  font-family: 'smooth';
  font-style: normal;
  font-weight: 400;
  src: local('Smooth/RobotoDraft'), local('Smooth/RobotoDraft-Regular'), url(https://fonts.gstatic.com/s/robotodraft/v1/0xES5Sl_v6oyT7dAKuoni4gp9Q8gbYrhqGlRav_IXfk.woff2) format('woff2'), url(https://fonts.gstatic.com/s/robotodraft/v1/0xES5Sl_v6oyT7dAKuoni7rIa-7acMAeDBVuclsi6Gc.woff) format('woff');
}


/*--------[HEADER]-----------*/

body {
  margin: 0;
}

ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

ul.topnav li {
  float: left;
}

ul.topnav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-family: "smooth";
}

ul.topnav li a:hover:not(.active) {
  background-color: #111;
}

ul.topnav li a.active {
  background-color: #4CAF50;
}

ul.topnav li.right {
  float: right;
}

@media screen and (max-width: 600px) {
  ul.topnav li.right,
  ul.topnav li {
    float: none;
  }
}


/*--------[HEADER]-----------*/


/* Paper box */

.paper {
  border: 6px solid white;
  height: auto;
  margin: 20px;
  padding: 20px;
  width: auto;
  background-color: white;
  margin-left: 3%;
  margin-right: 3%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  font-family: "smooth";
}


/* Game box */

.gamebox {
  height: auto;
  margin: 20px;
  padding: 20px;
  width: auto;
  font-family: "smooth";
  background-color: slategray;
  color: white;
  text-align: center;
}


/* Error */

.error {
  height: auto;
  margin: 20px;
  padding: 20px;
  width: auto;
  font-family: "smooth";
  background-color: indianred;
  color: white;
  text-align: center;
  display: none;
}


/* Error */

.beterror1 {
  height: auto;
  margin: 20px;
  padding: 20px;
  width: auto;
  font-family: "smooth";
  background-color: indianred;
  color: white;
  display: inline;
  position: absolute;
  right: 7%;
  top: 250px;
}

.beterror2 {
  height: auto;
  margin: 20px;
  padding: 20px;
  width: auto;
  font-family: "smooth";
  background-color: indianred;
  color: white;
  display inline;
  position: absolute;
  right: 7%;
  top: 325px;
}

.gamebox h1,
h3,
p {
  text-align: center;
}

form {
  text-align: center;
}

input[type=text] {
  width: 20%;
  padding: 12px 20px;
  display: block;
  margin: 0 auto;
  box-sizing: border-box;
  border: 1px solid #555;
  outline: none;
}

input[type=text]:focus {
  background-color: lightblue;
}

button {
  background-color: #4CAF50;
  /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

button:hover {
  background-color: darkgreen;
  /* Green */
  border: none;
  color: gray;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

button:focus {
  outline: none;
}

<div class="paper">
  <h2>Play</h2>
  <div class="gamebox">
    <h1><i class="fa fa-btc" aria-hidden="true"></i>itcoin dice game</h1>
    <div class="error" id="error">You don't have anymore bitcoins left. Why not deposit some?</div>
    <h3 id="balance">Balance: 1000BTC</h3>
    <form>
      Bet
      <br>
      <div><input id="userbet" onchange="checkBet()" value="1" type="text" name="bet">
        <div class="beterror1" id="beterror">That is not a valid bet.</div>
      </div>
      <br> Chance
      <br>
      <div><input id="userchance" value="50" type="text" name="chance">
        <div class="beterror2" id="beterror">That is not a good chance.</div>
      </div>
      <br>
      <h3>Payout: 0BTC</h3>
      <button type="button" id="dicebutton" onclick="prepareRoll()" style="vertical-align:middle"><img src="Images/dice.png"> Roll dice!</button>
    </form>
    <button type="button" id="autobet">Autobet</button>
  </div>
</div>

您将 div 放入内联的 span 元素中，将 span 更改为 div。

/* Error */

.beterror {
  height: auto;
  margin: 20px;
  padding: 20px;
  width: auto;
  font-family: "smooth";
  background-color: indianred;
  color: white;
  display: inline;
}

<form>
  Bet
  <br>
  <div>
    <input id="userbet" onchange="checkBet()" value="1" type="text" name="bet">
    <div class="beterror" id="beterror">That is not a valid bet.</div>
  </div>
  <br> Chance
  <br>
  <input id="userchance" value="50" type="text" name="chance">
  <br>
  <h3>Payout: 0BTC</h3>
  <button type="button" id="dicebutton" onclick="prepareRoll()" style="vertical-align:middle"><img src="Images/dice.png"> Roll dice!</button>
</form>

或者，您也可以将按钮设置为绝对位置并调整其坐标：

/* Error */

.beterror {
  height: auto;
  margin: 20px;
  padding: 20px;
  width: auto;
  font-family: "smooth";
  background-color: indianred;
  color: white;
  /*display: inline;*/
  /* new stuff */
  position: absolute;
  top: 0px;
  left: 160px;
}

<form>
  Bet
  <br>
  <span><input id="userbet" onchange="checkBet()" value="1" type="text" name="bet"><div class="beterror" id="beterror">That is not a valid bet.</div></span>
  <br> Chance
  <br>
  <input id="userchance" value="50" type="text" name="chance">
  <br>
  <h3>Payout: 0BTC</h3>
  <button type="button" id="dicebutton" onclick="prepareRoll()" style="vertical-align:middle"><img src="Images/dice.png"> Roll dice!</button>
</form>

Answer 2

请看下面。将 .beterror 的显示设置更改为内联块并删除了宽度、高度、填充和大部分边距的设置。

.beterror {
  font-family: "smooth";
  background-color: indianred;
  color: white;
  display: inline-block;
  margin-left: 5px;
}

<form>
  Bet
  <br>
  <span><input id="userbet" onchange="checkBet()" value="1" type="text" name="bet"><div class="beterror" id="beterror">That is not a valid bet.</div></span>
  <br> Chance
  <br>
  <span><input id="userchance" value="50" type="text" name="chance"><div class="beterror" id="beterror">That is not a good chance.</div></span>
  <br>
  <h3>Payout: 0BTC</h3>
  <button type="button" id="dicebutton" onclick="prepareRoll()" style="vertical-align:middle"><img src="Images/dice.png"> Roll dice!</button>
</form>

Answer 3

一种解决方案是使用某种 css 网格系统，bootstrap 等许多布局框架都实现了这一点。基本实现可能如下所示：

<div class="row">
    <div class="col s3"></div>
    <div class="col s6">Bet</div>
    <div class="col s3"></div>
</div>
<div class="row">
    <div class="col s3"></div>
    <div class="col s6"><input id="userbet" onchange="checkBet()" value="1" type="text" name="bet"></div>
    <div class="col s3"><div class="beterror" id="beterror">That is not a valid bet.</div></div>
</div>
[...more div.row tupels]

作为简单的网格实现：

.row .col.s3 {width: 25%; float:left;}
.row .col.s6 {width: 50%; float:left;}

如何让错误消息显示在输入按钮的右侧？

How can I make my error message show to the right of my input button?

html

css

frontend