Question

现在正在处理一个项目，创建一个我无法正确设置格式的下注页面。我曾尝试将所有内容都封装在自己的div中，然后将这些元素放入flex容器中，但是当我这样做时，所有内容似乎都相互重叠了。

我目前正在尝试将中断之间的所有内容分成4个单独的列进入自己的行。

是否有什么见识可以用来正确格式化？

任何JS都超出该项目的范围，可能一文不值。

<!DOCTYPE html>
<html>
	<style>
		#chuckPage
		{
			margin:auto;
			height: 50%;
			width: 50%;
			overflow: auto;
			background-color: white;
			padding: 25px;
			border: 5px solid #ac5353;
			text-align: center;
		}
		
		body
		{
			background-color: #59a659;
		}
	</style>
	<head>
		<meta charset="ISO-8859-1">
		<title>Chuck-A-Luck</title>
	</head>
	<body>
		<div id="chuckPage">
			<h1>Choose your bets!</h1>
			<h2>Current Purse: $1,000.00</h2>
			<form action="Die" method="post">
				<input type="checkbox" name="singleDie"> Single 
				<label>Die Select </label>
				<select name="dieSelect">
					<option value ="1">1</option>
					<option value ='2'>2</option>
					<option value ='3'>3</option>
					<option value ='4'>4</option>
					<option value ='5'>5</option>
					<option value ='6'>6</option>
				</select>
				<input type="number" name="singleBetAmt" value="0" min="0" max="1000.0">
				<p>1 Correct Die, 1:1, 2 Correct Dice, 2:1, 3 Correct Dice, 12:1</p>
				<br><br>
				<input type="checkbox" name="tripleDie"> Triple  
				<p>Any of the triples</p>
				<input type="number" name="tripleBetAmt" value="0" min="0" max="1000.0">
				<p>30:1</p>
				<br><br>
				<input type="checkbox" name="bigDie"> Big 
				<p>Sum of dice is 11 or higher (Doesn't work on triples)</p>
				<input type="number" name="bigBetAmt" value="0" min="0" max="1000.0">
				<p>1:1</p>
				<br><br>
				<input type="checkbox" name="smallDie"> Small 
				<p>Sum of dice is 10 or lower (Doesn't work on triples)</p>
				<input type="number" name="smallBetAmt" value="0" min="0" max="1000.0">
				<p>1:1</p>
				<br><br>
				<input type="checkbox" name="fieldDie"> Field 
				<p>Sum of dice is outside of or 8 and 12</p>
				<input type="number" name="fieldBetAmt" value="0" min="0" max="1000.0">
				<p>1:1</p>
				<br><br>
				<input type = "submit" name="sendData" value="Place Your Bet!">
			</form>
		</div>
	</body>
</html>

这是我为之努力的一个例子。

Click me to see the example i was given

Answer 1

如果您希望结果页面看起来与示例图像相同，则可以浏览Table标记并分别指定表的行和列中的每个项目。希望这会有所帮助！

Answer 2

使用表肯定是一种可行的方法-但让我们考虑一下flexbox。在HTML中进行一些微调，我们可以创建行和列并添加响应性。可以为table添加响应能力，但不能带来愉悦的开发人员体验。

在以下示例中，我设置了flex行列以假定25%可用行空间。当屏幕小于750px时，就没有空间容纳4列数据，因此我将列宽更改为50%。

确保以整页模式进行测试。

#chuckPage {
  margin: auto;
  height: 50%;
  overflow: auto;
  background-color: white;
  padding: 25px;
  border: 5px solid #ac5353;
  text-align: center;
}

body {
  background-color: #59a659;
}

form[action="Die"] {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

form[action="Die"] .row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border-bottom: 2px solid gray;
}

form[action="Die"] .col {
  flex-basis: 25%;
  text-align: left;
}

@media screen and (max-width: 750px) {
  form[action="Die"] .col {
    flex-basis: 50%;
  }
}

<div id="chuckPage">
  <h1>Choose your bets!</h1>
  <h2>Current Purse: $1,000.00</h2>
  <form action="Die" method="post">
    <div class="row">
      <div class="col">
        <input type="checkbox" name="singleDie"> Single
        <label>Die Select </label>
      </div>

      <div class="col">
        <select name="dieSelect">
          <option value="1">1</option>
          <option value='2'>2</option>
          <option value='3'>3</option>
          <option value='4'>4</option>
          <option value='5'>5</option>
          <option value='6'>6</option>
        </select>
      </div>

      <div class="col">
        <input type="number" name="singleBetAmt" value="0" min="0" max="1000.0">
      </div>

      <div class="col">
        <p>1 Correct Die, 1:1, 2 Correct Dice, 2:1, 3 Correct Dice, 12:1</p>
        <br><br>
      </div>
    </div>

    <div class="row">
      <div class="col">
        <input type="checkbox" name="tripleDie"> Triple
      </div>

      <div class="col">
        <p>Any of the triples</p>
      </div>

      <div class="col">
        <input type="number" name="tripleBetAmt" value="0" min="0" max="1000.0">
      </div>

      <div class="col">
        <p>30:1</p>
        <br><br>
      </div>

    </div>

    <div class="row">
      <div class="col">
        <input type="checkbox" name="tripleDie"> Triple
      </div>

      <div class="col">
        <p>Any of the triples</p>
      </div>

      <div class="col">
        <input type="number" name="tripleBetAmt" value="0" min="0" max="1000.0">
      </div>

      <div class="col">
        <p>30:1</p>
        <br><br>
      </div>

    </div>

    <div class="row">
      <div class="col">
        <input type="checkbox" name="tripleDie"> Triple
      </div>

      <div class="col">
        <p>Any of the triples</p>
      </div>

      <div class="col">
        <input type="number" name="tripleBetAmt" value="0" min="0" max="1000.0">
      </div>

      <div class="col">
        <p>30:1</p>
        <br><br>
      </div>

    </div>

    <div class="row">
      <div class="col">
        <input type="checkbox" name="tripleDie"> Triple
      </div>

      <div class="col">
        <p>Any of the triples</p>
      </div>

      <div class="col">
        <input type="number" name="tripleBetAmt" value="0" min="0" max="1000.0">
      </div>

      <div class="col">
        <p>30:1</p>
        <br><br>
      </div>

    </div>

  </form>
</div>

正确格式化多个元素的HTML / CSS

2 个答案: