javascript - 附加项流到 div 之外

Question

我有一个简单的“骰子”滚轮，用户可以在其中根据输入选择多少面和多少个骰子。

我的问题是，如果用户选择了大量骰子，它会强制页面向左滚动以查看其他骰子。

我试图将这些骰子放在一个 div 中，甚至尝试在 css 中使用 word-wrap: break-word;，但这会将骰子堆叠在一起。

这是我的代码。

$(document).ready(function() {
  $('#autoLoadR').click(function() {
    $('#buttnLodr').html("");

    if ($('#sideNum').val() < 100) {

      if ($('#diceNum').val() < 20) {
        for (i = 0; i < $('#diceNum').val(); i++) {
          let index = i + 1;
          let roll = index;
          sidesAmount = $('#sideNum').val();

          roll = Math.floor(Math.random() * sidesAmount) + 1;

          $('#buttnLodr').append("<span id='diceBox'>" + roll + "</span>")
        }
      } else {
        alert("Please enter a number for less than 20 for number of dice")
      }
    } else {
      alert("Please enter a number less than 100 for number of sides")
    }
  });
});

body {
  background: #add8e6;
  margin-left: 2%;
  margin-top: 2%;
  width: 500px;
}

#spaceR {
  color: lightblue;
}

.rollMeNow {
  display: block;
  color: #fff;
  cursor: pointer;
  border: 1px solid #d7d7d7;
  font-size: 72px;
  height: 156px;
  line-height: 156px;
  width: 256px;
  background: #df1f3b;
  border-radius: 4px;
  text-align: center;
}

#optionDice {
  border: solid;
  width: 100%;
}

#diceBox {
  border: solid;
  padding: 7px 14px;
  box-shadow: 10px 5px;
  margin: 2%;
}

#rollTable {
  width: 100%;
  background: #fff;
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://aaronlilly.github.io/CDN/css/bootstrap.min.css">

<div id="optionDice">
  <h1>Number of Dice :
    <span id='spaceR'> :</span>
    <input type="text" id="diceNum" placeholder="Dice" size="5" style="margin-top: 10px;padding-bottom: 5px;padding-top: 4px;">
  </h1>

  <h1>Number of Sides :
    <input type="text" id="sideNum" placeholder="Sides" size="5" style="margin-top: 10px;padding-bottom: 5px;padding-top: 4px;">
  </h1>
</div>
<br><br>

<div class="rollMeNow" caption="Populate" id="autoLoadR">Roll</div>

<br>
<h1>
  <div id='rollTable'>
    <br>
    <div class="container">
      <div class="row">
        <!-- <div class="col-sm"> -->
        <div id='buttnLodr'> </div>
      </div>
    </div>
  </div>
  </div>
</h1>

Answer 1

#diceBox { 
  // ...
  display: inline-block;
}

还有一些其他的建议:

• 您有一些隐式声明的变量(i 在您的 for 循环中，sidesAmount 在该循环中)
• 只要您不重新分配变量，就使用const 而不是let
• 为什么从0开始循环，然后加1，然后存到另一个变量。然后用 Math.floor 覆盖该变量
• 尽量避免通过 ID 选择 DOM 元素(如果只有一个则为事件)。始终使用类。