Question

我会尝试用图片尽可能地解释这一点。

这是我的输入按钮（查看＆＃34下面的那个;下注＆＃34;）：

我希望错误消息显示在此处：

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

我该怎么做？我尝试过多种内容，例如span，inline display等。

更新：

在github上发布了完整的前端代码。

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

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

Answer 1

基于评论编辑，完整摘要：

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

＆＃13;

/*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;
}

＆＃13;

<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>

＆＃13;

您将div置于内联的span元素中，将span更改为div。

＆＃13;

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

＆＃13;

<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>

＆＃13;

或者，作为替代方案，您可以将按钮设置为绝对位置并调整其坐标：

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

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;}

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

3 个答案: